子モデルへのモデルのバインド

Question

私は3つのコンポーネントを持っています。 「親」、「子1」&「子2」。 Parentコンポーネントの読み込み時に、 'Parent'の内部にModelを作成し、そのモデルを子コンポーネントに渡してから、モデルにバインドして親モデルを更新します。

例：

モデル：

export interface ITemplateModel { 
    id: string; 
    name: string; 
    lastModified: Date; 
    status: string; 
    templateHistory: string; 
} 

'親'：

templateModel = ITemplateModel(); 

この時点から親HTMLで私は、これが適切かどうか不明だが、アイデアを示しています。

の親HTML '：

<app-child1 [(ngModel)]='templateModel'></app-child1> 
<app-child2 [(ngModel)]='templateModel'></app-child2> 

'CHILD1'：

{{templateModel.name}} 

'CHILD2'：私はあなたのアプローチが正しいとは思わない

<input [(ngModel)]="templateModel.status"> 

Answer 1

号。

親から子にデータを渡す必要がある場合は、@ Input（）を使用する必要があります。

Reference you can check for @Input()

そして、あなたは子から親にデータを渡す必要があるなら、あなたは@output（）を使用する必要があります。

Reference you can check for @Output()

これは、子要素のパラメータ@output @Input &を使用することができますどのように基本的な例です。

HTML：

<app-child *ngFor="let item of items" [name]="itemName" (onSelect)="selectedItemName($event)"> </app-child> 

TS：

export class ChildComponent { 
    @Input() name: string; 
    @Output() onSelect = new EventEmitter<any>(); 

    sendSelect(selected: any) { 
    this.onSelect.emit(selected); 
    } 
}