为什么Angular 2绑定在这种情况下不起作用？ （子组件输入字段）

Question

我有一个名为AppComponent的（Angular 2）根组件，它使用另一个名为Subcomp的组件。应用程序将@Input()参数传递给Sub。 Sub将此变量用于输入字段中的单向绑定。

现在我......

1. 将参数值设置为某个初始值（“start”）;这将按预期显示在输入字段中。
2. 将输入字段中的文本更改为其他内容。
3. 单击按钮以编程方式将AppComponent中的值重置为“start”。

然后我希望输入字段也重置为“start”，但它会继续显示第2步中更改的文本。这是正确的行为吗？

代码：

class Todo {
    constructor(public title: string) {}
}

@Component({
    selector: 'subcomp',
    directives: [FORM_DIRECTIVES],
    template: `New Title: <input type="text" [ngModel]="subtodo.title">`
})
export class Subcomp {
    @Input() subtodo: Todo;
}

@Component({
    selector: 'my-app',
    directives: [Subcomp],
    template: `To do: {{todo.title}}<br/>
               <subcomp [subtodo]="todo"></subcomp><br/>
               <button (click)="update()">Update</button>`
})
export class AppComponent {

    todo: Todo = new Todo('start');

    update() {
        this.todo = new Todo('start');
    }

}

Answer 1

是的，这是正确的行为。

因为您只在Subcomp中使用单向数据绑定，所以当您在输入字段中更改文本时，todo.title的值不会更改。

调用update()时，会创建一个新的Todo对象，但todo.title的值为start，因此当角度更改检测查看{{1}时}，它看不到任何变化 - [ngModel]="subtodo.title"的旧值为subtodo.title和当前值。角度变化检测按值比较基本类型（数字，字符串，布尔值）。

要证明这一点，试试这个：

start

或试试这个：

update() {
    this.todo = new Todo('start' + new Date());
}