在Angular2中弹出模态

Question

我在HTML代码中有一个模式，如下所述。

<app-modal #modal1>
                <div class="app-modal-header">
                    header
                </div>
                <div class="app-modal-body">
                    Whatever content you like, form fields, anything
                    <input type="text">
                </div>
                <div class="app-modal-footer">
                    <button type="button" class="btn btn-default" (click)="modal1.hide()">Close</button>
                    <button type="button" class="btn btn-default" (click)="modal2.show()">Show modal 2</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </app-modal>

我需要在单击选项卡时显示此模式。 如何在方法内部的打字稿文件中显示或隐藏此模式。

Answer 1

import {ViewChild} from '@angular/core';

@Component({
// boilerplate and ceremony
}) 
export default class {
  @ViewChild('modal1') modal1; // decorator argument matches #modal1 in template.

 addDetail() {
   this.modal1.show();
 }
}