私は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タグの値で構成されています)について認識する必要があります。
テンプレートにフォームタグを含むコンポーネントは、プレゼンテーションではなくコンテナである必要がありますか?
と関連する可能性がありますhttps://stackoverflow.com/questions/44533046/how-to-correctly-pass-props-to-a-component-with-rxjs-in-angular-4/44533249#44533249? –
@ Jota.Toledo私はその答えから理解していますが、プレゼンテーションのcmpが店舗の種類について気付いていないと、それはひどいことではありませんか?だから私の質問はそれについてです。いつもプレゼンテーションは「コンポーネントが店舗について何も知らない」として記述されています – Mergasov
あなたの特定のアプリのニーズは、特定の規約への厳しい遵守よりも重要です。スマートコンポーネントからビューコンポーネントを分離することは一般的な原則として理にかなっていますが、ルールに対する例外を作ることが理にかなっていることは間違いありません。私のアドバイスはそれを打ち消すことではありません。 – Muirik