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);
  }
...
}

无法在初始化angular2上打开模态

1 个答案: