加載角度2/4動畫動態組件

Question

我有一個動態創建的提醒組件。當警報顯示和隱藏時，我希望淡入/淡出動畫。在創建警報時，似乎動畫不會觸發，但是當警報關閉時，動畫確實會觸發。

經過進一步的調查，我意識到警報並沒有消退，這是因爲在視圖位於DOM之前觸發的ngOnInit()函數中與動畫觸發器綁定的屬性發生了更改，因此會發生動畫組件在屏幕上之前。

export class OverlayMessageComponent implements OnInit { 

    ... 

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

    ... 

} 

我知道我可以在ngAfterViewInit()功能更改的屬性，但是這可能會導致異常所強調here「表達它檢查後發生了變化」。

我試圖添加一個動畫觸發器，使用* => true和void => true，但這並沒有解決問題。我不知道是否有辦法觸發這個動畫，並以某種方式仍然使用ngOnInit()。

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

Answer 1

我碰到了同樣的問題 - 在角度4.2.4。即使使用ngAfterViewInit()，我也無法觸發動畫。我最終以可觀察的方式添加了1ms的延遲，並且工作正常。

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