2017-06-15 7 views
0

私はpresentational and containerコンポーネントのコンセプトを試してみます。ngrx:フォームタグを含むコンポーネントがプレゼンテーションまたはコンテナですか?

シナリオは単純です。フォームタグを含むいくつかのプレゼンテーションコンポーネントと、ストアと対話するいくつかのコンテナコンポーネントがあります。

@Component({ 
    selector: "presentational", 
    template: 
` 
<form> 
    <input [(ngModel)]="model.name" /> 
    <button (click)="onSubmit()">Send</button> 
</form> 
`, 
}) 
export class PresentationalCmp { 
    private model: Model; 
    @Output() emitter = new Emitter<Model>(); 
    onSubmit() { 
     this.emitter.emit(this.model); 
    } 
} 

@Component({ 
    selector: "container", 
    template: "<presentational (emitter)="addModel($event)"></presentational>" 
}) 
export class ContainerCmp { 
    addModel(model: Model){ 
     this.store.dispatch(..) //send model to server 
    } 
} 

このようなアプローチは論理的です。しかし1つの明らかな問題があります。私のPresentationalCmpは、いくつかのモデルタイプに依存しています(このタイプはストアアクションによって使用されます)。それは間違っていますが、コンポーネントは入力タグを使ってプロパティ(名前、...など)をバインドするので、モデルタイプを認識する必要があります。

私の実際の "PresentationCmp"には、いくつかのStore enum(これはselect htmlタグの値で構成されています)について認識する必要があります。

テンプレートにフォームタグを含むコンポーネントは、プレゼンテーションではなくコンテナである必要がありますか?

+0

と関連する可能性がありますhttps://stackoverflow.com/questions/44533046/how-to-correctly-pass-props-to-a-component-with-rxjs-in-angular-4/44533249#44533249? –

+0

@ Jota.Toledo私はその答えから理解していますが、プレゼンテーションのcmpが店舗の種類について気付いていないと、それはひどいことではありませんか?だから私の質問はそれについてです。いつもプレゼンテーションは「コンポーネントが店舗について何も知らない」として記述されています – Mergasov

+0

あなたの特定のアプリのニーズは、特定の規約への厳しい遵守よりも重要です。スマートコンポーネントからビューコンポーネントを分離することは一般的な原則として理にかなっていますが、ルールに対する例外を作ることが理にかなっていることは間違いありません。私のアドバイスはそれを打ち消すことではありません。 – Muirik

答えて

1

「店舗については何も知らない」とは、店舗や他の店舗関連の情報がコンストラクタを通じて注入されないことです。したがって、ダムコンポーネントが情報を取得/送信する唯一の方法は、入力/出力プロパティを使用することです。

ストアに知られているインターフェイス/クラスを使用することは、特にデータモデルのエンティティを表す場合は特に問題ありません。どうして?まあ、タイプコピー!通常、ストアにはPOJOのみが含まれている必要があります。POJOはインターフェイスで定義できます。この場合も、POJOインターフェースを使用してデータを渡すことは、まったく正常です。

関連する問題