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中的文字时，来自{{childText}}组件模板的app获取新值，但this.childText仍具有默认值（ “我的文字”）。

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

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

角度2组件中的双向绑定不正确

1 个答案: