How to instantiate In angular2 ngx-bootstrap modal

问题:

This is my parent component template fragment:

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

And this is my modal component:

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

Okay, It's working fine now.

But after I click the Add button, Modal show, I typed something in the input box and then closed and reopened, and the contents of those inputs still exist.

I found that this is actually on the page, the modal has been instantiated to complete, and here show and hide just add delete DOM, and modal component will not be destroyed.

However, I hope that every time you click add to re-create a modal instance, after the destruction of the current modal, I did not find this way.