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

Question

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

现在我...

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

然后我希望输入字段也重置为“开始”，但是它会一直显示步骤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，所以当角变化检测着眼于[ngModel]="subtodo.title"，它认为没有变化–的subtodo.title旧值是start作为是当前值。角度更改检测通过值比较基本类型（数字，字符串，布尔值）。

为了证明这一点，试试这个：

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

或试试这个：

<input type="text" [(ngModel)]="subtodo.title">