angular2 将 ngModel 传递给子组件

Posted 2023-02-22

【中文标题】angular2 将 ngModel 传递给子组件

【英文标题】：angular2 pass ngModel to a child component

【发布时间】：2017-05-12 01:26:26

【问题描述】：

我有 ParentComponent 和 ChildComponent，我需要将 ParentComponent 中的 ngModel 传递给 ChildComponent。

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

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

【问题讨论】：

你可以在子组件上创建一个@Input()，然后从父组件注入它

我在这里对类似问题做了详细回答：***.com/questions/40806779/…

【参考方案1】：

听起来您正在尝试包装表单控件。我写了一个库来帮助你做到这一点！ 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。

【参考方案2】：

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

在此处了解更多信息：http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

【讨论】：

我所看到的每一个地方，似乎都找到了一个需要在父级中使用 onChange 事件进行强耦合的解决方案，一直都知道必须有一种方法来创建不需要的组件任何一个。我全心全意地支持你。

【参考方案3】：

对于父 -> 子，使用@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

【讨论】：

如果 ngModel 属性名改变了怎么办？那么我将不得不更改 ChildComponent，对吗？