如何在模态打开时实例化角度2 ngx-bootstrap模态

Question

这是我的父组件模板片段：

<button type="button" (click)="addModal.show();">Add</button>
<add-modal #addModal></add-modal>

这是我的模态组成部分：

Component({
    selector: 'card-add-modal',
    template: `
        <div *ngIf="isShowModal" bsModal #addModal="bs-modal" [config]="{show: true, backdrop: 'static'}" (onHidden)="onHidden()" class="modal fade">
            <!-- header... -->

            <div class="modal-body">
                <input type="text" name="name" id="name" [(ngModel)]="model.test">
            </div>

            <!-- footer... -->
        </div>
    `
})
export class ModalComponent{
    @ViewChild('addModal') public addModal: ModalDirective;
    isShowModal: boolean = true;
    model: any = { test: 'hey modal...' };

    show(){ this.isShowModal = true; }
    hide(){ this.addModal.hide(); }
    onHidden(){ this.isShowModal = false; }
}

好的，现在工作正常。

但是在我点击Add按钮后，Modal显示，我在输入框中输入了一些内容然后关闭并重新打开，这些输入的内容仍然存在。

我发现这实际上是在页面上，模态已经实例化完成，这里显示和隐藏只是添加删除DOM，而模态组件不会被破坏。

但是，我希望你每次点击add来重新创建一个模态实例，在破坏当前模态后，我都没有找到这种方式。