Angular 4同时激活父组件和子组件

发布时间：2020-12-17 17:36:35 所属栏目：安全来源：网络整理

导读：我写了一些插图来说明我的问题： LINK 我需要为父组件设置动画,同时我想在子组件中制作一些动画.看起来angular是阻止子组件上的动画,然后简单地在父动画结束后跳转状态而没有任何转换. 是否有任何方法可以使动画并行工作,或至少链接而不使用回调？ @Componen

我写了一些插图来说明我的问题： LINK

我需要为父组件设置动画,同时我想在子组件中制作一些动画.看起来angular是阻止子组件上的动画,然后简单地在父动画结束后跳转状态而没有任何转换.

是否有任何方法可以使动画并行工作,或至少链接而不使用回调？

@Component({
  selector: 'outer',template: `
    <div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;">
      <inner [stateInner]="state"></inner>
    </div>`,animations:[
    trigger('state',[
      state('narrow',style({
        width: '100px'
      })),state('wide',style({
        width: '400px'
      })),transition('* => *',animate('500ms'))
    ])  
  ]
})
export class Outer {
  public state: string = 'narrow';
  constructor() {
  }
}


@Component({
  selector: 'inner',template: `
    <div [@stateInner]="stateInner">
      <h2>Hello</h2>
    </div>`,animations:[
    trigger('stateInner',style({
        height: '100px'
      })),style({
        height: '400px'
      })),animate('500ms'))
    ])  
  ]
})
export class Inner {
  @Input() stateInner: string = 'narrow';
  constructor() {
  }
}

解决方法

我想说使用回调是处理未来代码的最佳方法,但如果你只是需要让它工作,那么技巧就是使用OnChanges,SimpleChanges和setTimeout().

Working Plunker显示它是如何工作的,以及代码中内部div的主要变化：

进口

import {Component,Input,OnChanges,SimpleChanges} from '@angular/core'

模板

template: `
    <div [@stateInner]="localChange">
      <h2>Hello</h2>
    </div>

班级出口

localChange = 'narrow';

  ngOnChanges( changes: SimpleChanges ) {
    console.log(changes)
    setTimeout( () => this.localChange = changes.stateInner.currentValue,500);
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!