Question

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

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

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

Answer 1

您需要在子类中实现var ndx = crossfilter(experiments), runDimension = ndx.dimension(function(d) {return ""+d.location;}) speedSumGroup = runDimension.group().reduceSum(function(d) {return d.amount ;}); chart .width(768) .height(480) .title(function(d){return d.value;}) .slicesCap(4) .innerRadius(100) .dimension(runDimension) .group(speedSumGroup) .ordinalColors(['#1f78b4', '#b2df8a', '#cab2d6','#bc80bd']) .legend(dc.legend()) .on('pretransition', function(chart) { chart.selectAll('text.pie-slice').text(function(d) { return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%'; }) }) .on('transition', function(chart) { chart.selectAll('text.pie-slice').text(function(d) { return d.data.key + ' ' + d.value; }) }) chart.render();。它将您的组件定义为“具有值”，可以使用角度方式绑定。

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

Answer 2

对于家长 - ＆gt;孩子，使用@Input

儿童 - ＆gt;家长，使用@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

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);
  }
}

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

angular2将ngModel传递给子组件

3 个答案: