角度 2 分量中的双向绑定不正确

Question

我正在尝试在角度 2 中实现双向绑定。我有以下父组件：

app.component.html：

<child [(text)]="childText" (textChanged)="textChanged($event)"></child>
<span>{{childText}}</span>

app.components.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  childText = 'My text';
  textChanged(newValue: string) {
    console.log(this.childText); // this.childText is equal "My text" always 
    console.log(newValue); // output new value from child input
  }
}

child.component.html：

<input #inputEl [value]="text" (keyup)="text = inputEl.value">

child.component.ts：

@Component({
  selector: 'child',
  templateUrl: 'child.component.html',
  styleUrls: ['child.component.scss']
})
export class ChildComponent {
  private _text: string;
  @Output() textChanged: EventEmitter<string> = new EventEmitter<string>();
  @Input()
  get text(): string {
    return this._text;
  }
  set text(value) {
    this._text = value;
    this.textChanged.emit(value);
  }
  constructor() { }
}

当我更改组件input的文本child时，组件模板app {{childText}}采用新值，但this.childText仍然具有默认值（"我的文本"）。

我可以在AppComponent.textChanged中更改AppComponent.childText：

this.childText = newValue;

但是是否可以在没有组件回调的情况下更改this.childText child？

为什么<span>{{childText}}</span>只接受新的价值？

Answer 1

使用 [(x)] 的双向绑定的语法是一个名为 x 的属性和一个名为 xChange 的相应事件。你刚刚在textChanged有一个错字.

export class ChildComponent {
  @Input() text: string;
  @Output() textChange: EventEmitter<string> = new EventEmitter<string>();
  onKeyUp(val) {
    this.text = val;
    this.textChange.emit(this.text);
  }
  ...
}