Question

我正在尝试在角度组件中实现双向数据绑定。目前它处于父子模式。

parent.component.html

df2$run <- data.table::rleid(df2$City, df2$count)

aggregate(count ~ City + run, df2, function(x) paste(x[1], length(x), sep = ':'))
#>     City run count
#> 1 London   1   1:1
#> 2 Mexico   2   1:1
#> 3 London   3   1:2
#> 4 London   4   0:1
#> 5 London   5   1:1
#> 6 Mexico   6   1:1
#> 7 London   7   0:2
#> 8 London   8   1:1

parent.component.ts

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

child.component.html

title = 'app';

child.component.ts

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

当我从子组件更改标题时，标题也应该在父组件上实现。此外，我不确定为什么父代码无缘无故地继续循环。我在html中添加了文本只是为了测试它是否在两个组件中都更新了，但是它只在子节点中更新，而不是在父节点中更新。我来自angularjs背景，双向数据绑定在其中无缝地工作。我很困惑我做错了什么（我知道这是一个菜鸟问题）。

在这里演示：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);
}

看看Angular documentation关于双向绑定

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;

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

Answer 3

您正在以某种方式使用双向绑定创建无限更新周期。这会导致无限循环，并且您注意到最终的堆栈溢出。

要解决此问题，最好还是要为titleChange事件添加一些逻辑（这是 banana - banana-in-a-box <的部分/ em>语法，即[(title)]中的parens中的部分，它自动转换为名为titleChange的事件发射器。例如，您可能希望跳过更新父组件的title属性（如果它等于子组件发出的更新。）

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

另一个常见模式是使title为私有（通常带有前缀下划线，例如_title），然后添加一个getter get title() { return this._title;}，以便您可以（1）封装此属性并（2）添加一些处理。在你的情况下，这不是必需的，但它也没有伤害。 ; - ）

这是包含这些更改的plunkr。

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

3 个答案: