コンポーネント入力に値が渡されました

Question

私が理解しているように、コンポーネント内のInputフィールドは一方向（親から子）であると考えられています。しかし、私はInputに渡している値を持っていますが、それをコンポーネントで変更していますが、それも親の変更に気付いています。それはオブジェクトが参照として渡されるように私にはいくらか意味がありますが、私はそれを推測しているのは、「一方向バインディング」ということは、厳密ではなく単なるパラダイムであるということですか？ Angularは片方のバインドを強制するためにフードの下で何もしませんか？

基本的に、私がやっている：

<session-form [values]="session"></session-form> 

をsession-formコンポーネントでは、私は、モーメントオブジェクトにunixtimestampからsession.startを変更します。しかし、私は親に気づき、session.startもモーメントオブジェクトです。

このようなデータを使用するためのパラダイムはありますか？変数に入力値をコピーすると、それが設定されたコンポーネントに厳密にスコープされますか？

Answer 1

はい、オブジェクトは参照渡しされます。ただし、双方向バインディングであり、オブジェクトは参照によって渡されるため、親コンポーネント内での変更も反映されるため、オブジェクトのプロパティは[(ngModel)]を使用してフォームにバインドしないでください。その代わりにFormGroupを作成し、FormBuilder.group()関数を使用してオブジェクト値を一方向に渡す必要があります。

// Inside of your child component 
@Input() myInput: SomeClass; 

form: FormGroup 

constructor(
    private formBuilder: FormBuilder 
) { }  

ngOnInit(): void { 
    this.form = this.formBuilder.group({ 
     prop1: [this.myInput.prop1], 
     // etc. 
    }); 
} 

Answer 2

スマート/ダム（コンテナ/プレゼンテーション）コンポーネントのアーキテクチャを調べます。

基本的な考え方は、スマートコンポーネントの状態が含まれているサービスにアプリや話の状態を含んでいることです。ダムコンポーネントは、@ Inputから与えられたデータをレンダリングするだけです。スマートコンポーネントは、状態をダムコンポーネントに渡します。

代わりに、直接あなたがデータを更新するために、スマートコンポーネントを伝えるためにイベント・エミッターを使用ダムコンポーネント内のデータを更新します。この方法で一方向のデータフローが得られます。ここ

さらに詳しい情報：私は上記示したように、私は2つの結合方法を使用していない http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/