Question

我是一个带字符串字段输入的简单组件：

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'mundo-input',
    template: `
        <input class="form-control"  [(ngModel)]="zeit"  />
    `
})
export class MundoInputComponent  {
    @Input() zeit: string;    
}

我正在使用这个组件：

<mundo-input [(zeit)]="myzeit"></mundo-input>

外部组件的myzeit属性被正确注入。当我手动更改值并按外部组件上的save时，myzeit-property具有旧值。

我将zeit的类型从字符串更改为Hero类（如NG2教程中所示），并将输入的绑定更改为zeit.name。双向数据绑定有效。

是否可以从外部组件绑定到string类型的属性？或者它是否可能与复杂的类型（类）？

Answer 1

您需要为组件添加输出以便能够利用双向绑定：

@Component({
  selector: 'mundo-input',
  template: `
    <input class="form-control" [ngModel]="zeit"
               (ngModelChange)="onChange($event)" />
  `
})
export class MundoInputComponent  {
  @Input() zeit: string;    
  @Output() zeitChange:EventEmitter<string> = new EventEmitter();

  onChange(val) {
    this.zeitChange.emit(val);
  }
}

按照惯例，输出必须zeitChange才能使用快捷方式[(zeit)]="myzeit"：

<mundo-input [(zeit)]="myzeit"></mundo-input>

在您的情况下，您只对zeit参数使用单向绑定。

请参阅此plunkr：https://plnkr.co/edit/snaM4y?p=preview。

Angular 2 Modelbinding to simpletype（string）不起作用

1 个答案: