如何銷燬沒有ComponentFactory的Angular 2組件？

當通過ComponentFactory動態創建組件時，返回的ComponentRef提供了一個destroy方法，該方法完美地實現了我想完成的任務。考慮到這一點，它看起來像我需要做的是獲得一個靜態創建組件的ComponentRef，然後使用其銷燬功能（其中this answer指出），但是當我嘗試這個時，我得到一個錯誤，說「摧毀不是一個函數「，即使我確實得到了一個對象。如何銷燬沒有ComponentFactory的Angular 2組件？

下面是我使用ViewChild語法：

@ViewChild(MyComponent) myComponentRef: ComponentRef<MyComponent>;

和我「消滅」的呼叫：

private destroy() { 
    this.myComponentRef.destroy(); 
}

這是在這裏觸發：

<button (click)="destroy()">Destroy</button>

調用此「銷燬「方法適用於我動態創建的組件，但不是靜態的。

編輯：因此，它看起來像部分刪除組件，但不是從DOM，這不是在動態創建的組件上調用「銷燬」時發生的行爲。另外，當我點擊一個我試圖銷燬的組件時，我的點擊事件功能仍然會觸發。

編輯2：我更新了我的ViewChild語法明確閱讀的ComponentRef，我得到「未定義」回：

@ViewChild(MyComponent, {read: ComponentRef}) myComponentRef: ComponentRef<MyComponent>;

如果返回「未定義」然後我猜這可能是不可能的。

來源

2016-09-01 badger2013

可以使用* ngIf指令動態刪除組件嗎？ –

這裏是Angular組件生命週期鉤子頁面https://angular.io/guide/lifecycle-hooks @ badger2013你用什麼資源來查找關於ComponentFactory的文檔？ https://medium.com/@Carmichaelize/angular-2-component-factory-resolver-395acb7c2129 - 這對我來說是一個新的。 – JGFMK

利用https://angular.io/api/core/OnDestroy – JGFMK

您可以在組件的容器中添加一個* ngIf，並在一個基礎中添加一個條件（ngif）來執行子元素的銷燬和創建。例如：

在視圖：

<div *ngIf="destroy"> 
    <component-child></component-child> 
</div> 
<button (click)="destroyFunction()">Click to Destroy</button>

在組件父類：

//Declare the view child 
@ViewChild(componentChild) componentChild: componentChild; 

//Declare the destroy variable 
destroy:boolean; 

//Add a function to change the value of destroy (boolean) 
public destroyFunction(){ 
    this.destroy = false; 
}

執行這些步驟可以執行子元件的破壞。我希望它對你有效

來源

2017-11-22 16:31:28 jorghe94

如何銷燬沒有ComponentFactory的Angular 2組件？

回答

相關問題