angular - 加载时的 Angular 2/4 动画动态组件

Question

我有一个正在动态创建的警报组件。当显示和隐藏警报时，我想有一个淡入/淡出动画。在创建警报的那一刻，动画似乎没有触发，但是当警报关闭时，动画会触发。

经过进一步调查，我意识到警报没有淡入是因为与动画触发器相关的属性ngOnInit()在视图位于 DOM 之前触发的函数中发生了更改，因此动画在组件打开之前发生屏幕。

export class OverlayMessageComponent implements OnInit {

  ...

  ngOnInit() {
    if(this.autoShow) {
      this.show();
    }
  }

  ...

}

我知道我可以更改ngAfterViewInit()函数中的属性，但这可能会导致“检查后表达式已更改”异常，如此处突出显示。

我尝试使用* => trueand添加动画触发器void => true，但这并没有解决问题。我不知道是否有办法触发这个动画并且仍然在使用ngOnInit().

代码示例： https ://plnkr.co/edit/8NvfhDvLVBd71I7DR0kW

score 0 · Accepted Answer

我在 Angular 4.2.4 中遇到了同样的问题。即使在使用ngAfterViewInit(). 我最终添加了一个 1ms 的延迟和一个 observable 并且有效。

ngOnInit(){
    Observable.of(true).delay(1)
    .subscribe(() => { this.show() } )
}

1 回答 1