Modal在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>

我需要在点击标签时显示此模态。如何在方法内的typescript文件中显示或隐藏此模态。

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