角度数据绑定在角度不起作用

Question

我正在尝试在角组件中实现两种方式数据绑定。目前它处于父母模式。

parent.component.html

<child [(title)]="title"></child>
<span style="color: red">This is parent component {{title}}</span>

parent.component.ts

title = 'app';

child.component.html

<span style="color: blue">This is child component {{title}}</span>

child.component.ts

@Input() title: any;
  @Output() pushTitle = new EventEmitter();
  constructor() { }
  ngOnInit() {
    this.title = 'new title';
    this.pushTitle.emit(this.title);
  }

当我从孩子那里更改时，标题也应在父部分上实现。另外，我不确定为什么父代码无缘无故地循环循环。我在HTML中添加了文本，只是为了测试其是否在两个组件中进行了更新，但仅在孩子中而不是在父母中进行更新。我来自AngularJS背景，而DADAININGINIT BINTINICT在其中无缝起作用。我只是困惑了我做错了什么(我知道这是一个菜鸟问题(。

演示：https：//stackblitz.com/edit/angular-xttmxg

Answer 1

还有另一种方法可以实现。

@Input() title: any;
@Output() titleChange: EventEmitter<any> = new EventEmitter<any>();
changeValue() {
  this.title= !title;
  this.titleChange.emit(this.title);
}

查看有关两种绑定的角文档

Answer 2

两种方式数据绑定仅适用于模板 - 组件交互。

如果要将标题更改发送给父部件，则应执行类似的操作：

父模板和组件：

<child [title]="title" (pushTitle)="onTitleChange(value)"></child>
<span style="color: red">This is parent component {{title}}</span>
onTitleChange(value) {
    this.title = value;
}

后续问题：

模板：

 <input [(ngModel)]="inputModel">

组件：

inputModel: string;

现在，每次您在输入字段中键入某些内容时，您都会看到组件模型中的更改，或者在以编程方式更改输入码值时，您将看到HTML输入中的更改。

Answer 3

您正在使用2条绑定来创建一个无限的更新周期。这会导致您注意到的无限环路和最终的堆栈溢出。

---

要解决此问题，最好是要在 titleChange事件中添加一些逻辑(这是 banana - banana-in-a-a-box 语法的部分，即[(title)]中Parens中的零件，该零件将自动翻译成名为titleChange的事件发射极。例如，您可能要跳过更新父组件的title属性，如果其等于子组件发出的更新。

这意味着您应该将[(title)]拆分为(titleChange)="titleChange($event)"和[title]="title"。第一部分允许您将更新的标题作为$event传递，然后在函数titleChanged中处理(在这种情况下为任意名称(。第二部分的效果是，子组件会收到父部件的title属性的更新。

另一个常见的模式是使title私有(通常使用前缀下划线，例如_title(，然后添加一个Getter get title() { return this._title;}，以便您可以(1(封装此属性，(2(添加一些处理。就您而言，这是不需要的，但也不需要伤害。; - (

---

这是一个包含这些更改的plunkr。