ngrx：包含表單標籤的組件應該是表示性還是容器？

我嘗試使用presentational and container組件的概念。ngrx：包含表單標籤的組件應該是表示性還是容器？

該場景很簡單。有一些包含表單標籤的表示組件和一些與Store進行交互的容器組件。

@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 
    } 
}

我發現這種方法合乎邏輯。但是有一個明顯的問題。我的PresentationalCmp取決於某些模型類型（此類型由商店操作使用）。這是錯誤的，但組件需要注意模型類型，因爲它將屬性（名稱，...等）與輸入標籤綁定。

另外我真正的「PresentationalCmp」需要了解一些Store枚舉（它由選擇html標籤的值組成）。

那麼這是否意味着模板中包含表單標籤的組件應該是容器，而不是表示性的？

來源

2017-06-15 Mergasov

也許與https://stackoverflow.com/questions/44533046/how-to-correctly-pass-props-to-a-component-with-rxjs-in-angular-4/44533249#44533249有關？ –

@ Jota.Toledo據我的理解，如果表現cmp意識到某些商店類型，或者沒有（在該答案中輸入Good），那麼這不是什麼糟糕的事情？所以我的問題是關於它。總是呈現被描述爲「零部件對商店一無所知」 – Mergasov

在一天結束時，您的特定應用程序的需求應該超過嚴格遵守某些約定。雖然從智能組件中分離出視圖組件是一種普遍原則，但有時候在規則中規定一個例外是有意義的。我的建議不會過時。 – Muirik

什麼是「對商店一無所知」是因爲商店或任何其他商店的相關信息不是通過構造函數注入的。所以愚蠢組件獲取/發送信息的唯一方法是通過輸入/輸出屬性。

使用商店知道的接口/類是可以的，特別是如果它們表示數據模型的實體。爲什麼？那麼，打字稿！通常你的商店應該只包含你可以通過接口定義的POJO。在這種情況下，使用POJO接口傳遞數據也是完全正常的。

來源

2017-06-16 06:47:53

ngrx：包含表單標籤的組件應該是表示性還是容器？

回答

相關問題