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}`);
}