angular2 将 ngModel 传递给子组件

angular2 pass ngModel to a child component

我有ParentComponent和一个ChildComponent,我需要将ParentComponent中的ngModel传递给ChildComponent

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

如何获取ChildComponent中ngModel的值并对其进行操作?

对于父 -> 子,使用@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/mc3Jqo3SDDaTueNBSkJN?p=preview

实现此目的的其他方法:

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

您需要在 child class 中实施 ControlValueAccessor。 它将您的组件定义为 "having a value",可以使用 angular 方式绑定。

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

听起来您正在尝试包装表单控件。我写了一个库来帮助你做到这一点! s-ng-utils has a superclass to use for your parent component: 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.