2016-09-01 3 views
11

ComponentFactoryを通じてコン​​ポーネントを動的に作成する場合、返されるComponentRefはdestroyメソッドを提供します。このメソッドは、私が達成したいと思っているものに対して完全に機能します。それを念頭に置いて、私がする必要があるのは、静的に作成されたコンポーネントのComponentRefを取得し、その破壊関数(this answerの状態)を使用することですが、これを試してみると、私がオブジェクトを取り戻したとしても "関数"を返します。ComponentFactoryなしでAngular 2コンポーネントをどのように破棄しますか?

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

そして、私の "破壊" コール:ここ

は、私がViewChildのために使用している構文です

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

は「これを呼び出す:ここではトリガされ

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

私が動的に作成するコンポーネントではなく、静的には使用できません。

編集: これは、部分的にではなく、動的に作成されたコンポーネントの「破壊」を呼び出すときに発生する同じ動作ではありませんDOMから、コンポーネントを削除しないようなので、それはそうです。また、私がクリックしようとしたコンポーネントをクリックすると、私のクリックイベント機能がまだ起動します。

編集2:私は明示的にバックComponentRefために読んで、私は「未定義」を取得するために私のViewChild構文を更新:

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

それは「未定義」を返した場合、私はできないことがあり、これを推測しています。

+0

* ngIfディレクティブを使用してコンポーネントを動的に削除できますか? –

+0

角度コンポーネントのライフサイクルフックのページですhttps://angular.io/guide/lifecycle-hooks @ badger2013 ComponentFactoryに関するドキュメントを探すためにどのようなリソースを使いましたか? https://medium.com/@Carmichaelize/angular-2-component-factory-resolver-395acb7c2129 - それは私の新しいものでした。 – JGFMK

+0

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

答えて

0

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

。私はそれがあなたのために効果的に働くことを願っています

関連する問題