2つの子コンポーネント(dataset-create
およびdataset-detail
)を1つ持つ親コンポーネントがAngular2にあります。二成分そのテンプレートにこのコードを使用して任意の時点で示されている親コンポーネントのコントロール:角2:DOMから自分自身を削除するコンポーネント
<div [ngSwitch]="mode">
<template [ngSwitchWhen]="'create'">
<dataset-create [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-create>
</template>
<template [ngSwitchWhen]="'detail'">
<dataset-detail [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-detail>
</template>
</div>
親コンポーネントは、子供からイベント(close)
をリッスン。それを受信した場合、コールバック関数は、次のコードを有している(onDatasetFormClose()
)と呼ばれる。
private onDatasetFormClose() {
this.mode = "list";
}
この関数はmode
変数の値を変更します。これにより、ngSwitchWhen
ステートメントが失敗し、現在アクティブな子コンポーネントが破棄されます。
また、FYI、これは子構成要素のうちの1つのテンプレートがどのように見えるかです:これ作る(それが親コンポーネントに依存しているのでしかし、この解決策は、私には「間違っている」に見える
<form novalidate="novalidate">
<button type="button" (click)="onClose()">close</button>
<button type="submit" (click)="onSubmit()">submit</button>
<label for="dataFileD">data</label>
<input id="dataFileD" type="file" (change)="onFileChange($event)">
</form>
それを独立して再利用することは難しい)。
私は同様の結果を達成する別の方法は、ルータを使用することだと思います。このソリューションは、「理由があまりにも膨大すぎる」というだけでなく、上記の私の解決策と同じ問題を抱えています。子コンポーネントを単独で使用することはできません。
子コンポーネントをDOMから削除することはできますか?このような状況を処理する正しい方法は何ですか?おそらく、DOMから自分自身を取り除いているコンポーネントを持っているのは、不正なAngular2コーディングの練習ですか?
ありがとうございます。
私はコンポーネントが親コンポーネントを必要とするのは良いと思います。イベントを発生させるコンポーネントには、おそらく親コンポーネントが必要です。たとえば、タブを実装するには、おそらく 'tab'子コンポーネントに加えて、親の' tabset'コンポーネントが必要です。 –