2

私は Angular2 (beta1) の初心者で、2 つのコンポーネントで構築された、一種の単純な編集可能なグリッドを実装したいと考えています。ここでは、単純にするために 2 つのフェイクデータ コンポーネントを使用します。それらは (このプランカーを参照してください: http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI ):

  • という名前の親コンポーネントcontact。名前のある連絡先を表すとします。
  • という名前の子コンポーネントentry。連絡先のエントリを表すとします。各連絡先には 0 個以上のエントリを含めることができます。各エントリには住所と郵便番号があります。

ユーザーが連絡先のプロパティとその子エントリを編集できるフォームを作成したいと思います。新しいエントリを追加したり、既存のエントリを削除したり、既存のエントリを編集したりできます。

この目的のために、これら両方のコンポーネントのビューはフォームベースのテンプレートを提供します。このデータ フローは次のように考えることができます。

  1. contact : ユーザーはフォームを編集し、送信ボタンをクリックしてすべてを保存します。したがって、送信ボタンを処理し、コンポーネント出力としてイベントを発行するコードを作成するだけです。連絡先にはentries 配列プロパティがあります。したがってngFor、テンプレートでディレクティブを使用して、それぞれのエントリ コンポーネントをレンダリングできます。

  2. entry : エントリにはプロパティがaddressCtlあり、フォーム全体を表すにzipCtl含まれる制御ディレクティブを表します。また、親テンプレートで次のようなことができるように、コンポーネント (および)ControlGroupの入力としてバインドするプロパティがいくつか必要です。addresszip

    <tr *ngFor="#e of entries">
  <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
</tr>

ここで、コントロールの入力を表す「モデル」プロパティと「フォーム」ディレクティブ プロパティとの間の関係をどのように形成するかが明確ではありません。バインドを介して親コンポーネントから住所と郵便番号の値を取得し[...]、更新された値を子コンポーネント (blur など) によって起動されたイベントを介して渡すことができる必要があります。これは NG2 の世界では意味がありますか? とにかく、ここで欠けているのは、フォーム コントロールの値をモデル プロパティの値に接続するにはどうすればよいかということです。誰かがこれをより明確にするか、いくつかの優れたドキュメントを指摘できますか?

4

2 に答える 2

2

実際、バインディングの使用は[...]一方向バインディングにのみ対応します。親コンポーネントで親プロパティが更新されると、子コンポーネントでも値が更新されます。

@Ouputただし、子から親の属性を更新する場合は、イベントと属性を活用する必要があります。

labelsコンポーネントを含むサンプルを次に示します。

export class LabelsComponent implements OnInit {
  @Input()
  labels:string[];

  @Output()
  labelsChange: EventEmitter;

  (...)

  removeLabel(label:string) {
    var index = this.labels.indexOf(label, 0);
    if (index != undefined) {
      this.labels.splice(index, 1);
      this.labelsChange.emit(this.labels);
    }
  }

  addLabel(label:string) {
    this.labels.push(this.labelToAdd);
    this.labelsChange.emit(this.labels);
    this.labelToAdd = '';
    this.addAreaDisplayed = false;
  }
}

このようにして、このコンポーネントで双方向バインディングを活用できます。

<labels [(labels)]="company.labels"></labels>

それがあなたの質問に答えてくれることを願っています、ティエリー

于 2016-01-29T11:01:30.830 に答える