web-dev-qa-db-ja.com

ngModelを子コンポーネントに渡す

ParentComponentとChildComponentがあり、ParentComponentのngModelをChildComponentに渡す必要があります。

// the below is in ParentComponent template
<child-component [(ngModel)]="valueInParentComponent"></child-component>

childComponentでngModelの値を取得して操作するにはどうすればよいですか？

angularangular2-componentsangular2-ngmodel
10
Ibraheem Al-Saady

子クラスにControlValueAccessorを実装する必要があります。 angular方法を使用してバインドできる「値を持つ」コンポーネントとしてコンポーネントを定義するものです。

詳細についてはこちらをご覧ください： http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

19
Amit

親->子の場合、@ Inputを使用します

子->親の場合、@ Outputを使用します

したがって、両方を使用するには：

親コンポーネント内

TypeScript：

  onValueInParentComponentChanged(value: string) {
    this.valueInParentComponent = value;
  }

HTML

<child-component 
 (onValueInParentComponentChanged)="onValueInParentComponentChanged($event)"
 [valueInParentComponent]="valueInParentComponent">
</child-component>

子コンポーネント内

TypeScript：

export class ChildComponent {  
   @Input() valueInParentComponent: string;
   @Output() onValueInParentComponentChanged = new EventEmitter<boolean>();
} 

onChange(){
  this.onValueInParentComponentChanged.emit(this.valueInParentComponent);
}

HTML

<input type="text" [(ngModel)]="valueInParentComponent"   
    (ngModelChange)="onChange($event)"/>

完全な例

https://plnkr.co/edit/mc3Jqo3SDDaTueNBSkJN?p=preview

これを達成する他の方法：

https://angular.io/docs/ts/latest/cookbook/component-communication.html

1
Sumama Waheed

フォームコントロールをラップしようとしているようです。そのためのライブラリを作成しました！ s-ng-utils には、親コンポーネントに使用するスーパークラス WrappedFormControlSuperclass があります。次のように使用できます。

@Component({
  template: `
    <!-- anything fancy you want in your parent template -->
    <child-component [formControl]="formControl"></child-component>
  `,
  providers: [provideValueAccessor(ParentComponent)],
})
class ParentComponent extends WrappedFormControlSuperclass<ValueType> {
  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }
}

@Amitの答えが示唆するように、これは<child-component>にControlValueAccessorがあることを前提としています。自分で<child-component>を書いている場合は、s-ng-utilsにもスーパークラスがあり、それを助けます： FormControlSuperclass 。

0
Eric Simonton