Question

我在模态对话框自定义组件（“ my-modal-dialog”）中显示了一个自定义组件（“ my-addmodule”），如下所示，

<my-modal-dialog [showFooter]="false" #addModuleDialog>

    <my-addmodule (hideDialog)="hideAddModalDialog($event)" (reloadGrid)="reload($event)" #addModule></my-addmodule>

  </div>
</my-modal-dialog>

现在的问题是，每次我关闭模式对话框时，angular都不会破坏“ my-addmodule”组件。因此，当我再次打开模态对话框时，看到的是“ my-addmodule”组件的相同状态（一些下拉选择和先前在文本框中输入的值，等等）。当我关闭模态对话框并在打开模态对话框时重新创建组件时，我想让angular破坏组件。

我尝试添加以下代码““ my-addmodule”组件，

export class AddModuleComponent implements OnInit, OnDestroy {
 public destroyComponent(){
    this.ngOnDestroy();
  }
ngOnDestroy(): void {
    console.log("Add module is destroyed");
  }
}

但是当我在模态对话框hide（）函数上调用“ destroyComponent”函数时，出现错误“ this.addModuleDialog.destroyComponent不是函数” 。

以下是我的父组件ts文件，该文件正在使用上述两个组件， ParentComponent.ts

export class ParentComponent implements {

  @ViewChild('addModuleDialog') addModuleDialog;
  @ViewChild('addModule') addModule;

showAddModuleDialog(e: any): void {
    e.preventDefault();
    this.addModuleDialog.show();
  }

  hideAddModalDialog(e: any): void {
    this.addModuleDialog.hide();
    this.addModule.destroyComponent();
  }
}

Parent.Component.html

<my-modal-dialog [showFooter]="false" #addModuleDialog>

        <my-addmodule (hideDialog)="hideAddModalDialog($event)" (reloadGrid)="reload($event)" #addModule></my-addmodule>

      </div>
    </my-modal-dialog>

在角度5的设计时间部分以编程方式调用ngOnDestroy

0 个答案: