初期化時にモーダルを開くことができませんangular2

Question

/* COMPONENT */ 
import { Modal } from './../../common-components/modal/modal.model'; 
import { Buttons } from './playground.model'; 
import { Component, OnInit } from '@angular/core'; 
import template from "./playground.component.html"; 
import style from "./playground.component.scss"; 

declare var jQuery: any; 
@Component({ 
    selector: 'app-playground', 
    template, 
    styles: [style] 
}) 

export class PlaygroundComponent implements OnInit { 
    vm = new Modal({ 
     id: 'vid-modal', 
     customColor: '#F00', 
     showHeader: true, 
     showClose: true, 
     dismissible: false 
    }); 
    buttons = Buttons; 
    constructor() {} 
    ngOnInit() { 
    } 
    ngAfterViewInit() { 
     this.vm.actions.emit({ action: 'modal', params: ['open']}); 
    } 
    modalReady() { 
     this.vm.actions.emit({ action: 'modal', params: ['open']}); 
    } 
    openModal() { 
     this.vm.actions.emit({ action: 'modal', params: ['open']}); 
    } 

} 

/* HTML */ 
<vc-button [button]="buttons.save_btn" (click)="openModal()"></vc-button> 

<vc-modal [modal]="vm" (modalReady)="modalReady()"> 
    <vc-modal-body> 
     IS IT WORKING? 
    </vc-modal-body> 
</vc-modal> 

ngAfterViewInitを使用してページが初期化されるとすぐにモーダルを開こうとしています。 モーダルが初期化されたときに私に知らせるモーダルコンポーネント内のエミッタも使用しています。 この後も、私は初期化時にモーダルを開くことができません。 ボタンクリックでのみ動作します。 jQueryまたはサードパーティのソリューションは使用しません。私はこれが非同期の問題だと知っていますが、私はobservables/replay subjectを使って解決できません。

Answer 1

この試してみてください：あなたのコンポーネントのクラス

export class PlaygroundComponent implements OnInit { 
... 
    ngOnInit(){ 
    setTimeout(() => { 
     this.vm.actions.emit({ action: 'modal', params: ['open']}); 
    }, 1); 
    } 
... 
}