Angular2将ngmodel传递到儿童组件

Question

我有parentComponent和一个ChildComponent，我需要将parentcomponent中的ngmodel传递给ChildComponent。

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

如何在ChildComponent中获得NGMODEL的值并操纵它？

Answer 1

您需要在子类中实现ControlValueAccessor。这就是将您的组件定义为可以使用角度方式绑定的"具有值"的原因。

在此处阅读更多有关它的信息：http：//blog.thoughtram.io/angular/2016/07/27/custom-form-controls-controls-in-angular-2.html

Answer 2

for父 ->孩子，使用@input

对于孩子 ->父母，使用@output

因此，两者都使用：

在父级组件

打字稿：

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

html

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

在儿童组件中

打字稿：

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/mc3jqo3sdatuenbskjn?p=preview

其他方法：

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

Answer 3

听起来您正在尝试包装表单控件。我写了一个可以帮助您做到这一点的图书馆！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);
  }
}

这假设<child-component>具有ControlValueAccessor，正如 @Amit的答案所暗示的那样。如果您自己写<child-component>，则s-ng-utils中还有一个超级类别可以帮助： FormControlSuperclass。