未在Angular 2中设置子组件值？

Question

因此，我将子组件的值标记为：

@Input flag;

然后在特定的方法中，我有：

myParentComponent.flag = true;

然后在父组件的html中，我有：

<app-childComponent-template [flag] = flag ></app-childComponent-template>

我正在使用Chrome的检查工具来查看记录更改的控制台。 但是，当我在子组件中将标志设置为true时，它会起作用，但是不会继承到父组件，因此我不知道为什么。 我已经多次阅读了本文档（ https://angular.io/guide/component-interaction ），但似乎一切都相符了。

谢谢！

Answer 1

语法[flag]表示这是一种单向数据绑定：父级将把更改推送给子级flag 。 但是更改子项的@Input flag变量不会向父项发出更改。

为此，您需要在子组件中使用@Output ：

@Input('flag') flag;
@Output('flag') flagChanged = new EventEmitter<boolean>();

然后，要通知父标志已更改，请从子组件中发出一个事件：

this.flagChanged.emit(newFlagValue);

最后，要通知父组件中的更改：

<app-childComponent-template [flag]="flag" (flag)="onFlagChanged($event)"></app-childComponent-template>

onFlagChanged(newValue) {
    alert(`New flag value: ${newValue}`);
}