2016-01-28 20 views
6

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コーディングの練習ですか?

ありがとうございます。

+1

私はコンポーネントが親コンポーネントを必要とするのは良いと思います。イベントを発生させるコンポーネントには、おそらく親コンポーネントが必要です。たとえば、タブを実装するには、おそらく 'tab'子コンポーネントに加えて、親の' tabset'コンポーネントが必要です。 –

答えて

4

コンポーネントで親コンポーネントが必要な場合は問題ありません。イベントを発生させるコンポーネントには通常、親コンポーネントが必要です。そして時々、コンポーネントはより強固に結合されているか、一緒に使用されることを意図しています。たとえば、タブを実装するには、tab子コンポーネントに加えて、おそらく親コンポーネントtabsetが必要です。たとえば、ng2-bootstrap tabs implmenentationを参照してください。

親コンポーネントに依存することも意識的な意思決定である可能性があります。たとえば、不変のアプリケーションデータ(Savkin blogを参照)を使用してアプリケーションをモデリングする場合、コンポーネントによってアプリケーションデータが変更されることは意図的に防止される可能性があります。削除操作が必要な場合は、上位レベルのコンポーネントにアプリケーションデータを変更させるためにイベントを発行することができます(そして、入力プロパティを介して返信します)。

+0

実際にあなたのポイントはかなり意味があります。私はそのアプローチに従うことにしました!ありがとう! – AstrOne

+0

このタイプの問題を抱えている人を見るのは良いことです。私は実際に子供が親にデータを送るようにしようとしています(親はデータを表示します)。最初はデータを保持するために別のサービスを使用していましたが、親と子の両方がそれに依存していました。それは本当に迷惑だった、ここであなたがしていることは、私がそれが行われるべきであると感じる方法でその問題を解決する。 – Chris

+0

@Chris、あなたが共有しているデータが配列またはオブジェクト(すなわち、プリミティブ型(文字列、数値、ブール値)ではなく参照型)に含まれている場合、親はすでにあなたが行った変更を見ることができます親と子が同じ参照を共有するため、子の共有データ。詳細については、[この回答](http://stackoverflow.com/a/34208500/215945)を参照してください。あなたが達成しようとしていることを単純化するかもしれません。 –

0

サブコンポーネントにブール値フラグshowがないのはなぜですか。必要に応じてfalseに変更してください。 テンプレートでは、すべてをラップするだけです

関連する問題