有角的使用hostbinding decorator手动更新属性

我有一个具有hostbinded属性的组件,希望从其他组件手动更新。我是这样写的:

private _selected: boolean = false;
@HostBinding('class.selected')
get selected(): boolean {
    return this._selected;
}
set selected(value: boolean) {
    if (this._selected === value) {
        return;
    }
    this._selected = value;
    this.changeDetectorRef.markForCheck();
}

我有两个问题。

弗斯特 . 当我尝试更新的属性 ContentChild -不应用更改。参见此处的示例- https://stackblitz.com/edit/angular-changes-ignored-contentchildren-hostbinding :

@ContentChildren(ItemComponent) items: QueryList<ItemComponent>;

...

ngAfterViewInit() {
  this.updateItems();
  this.items.changes.subscribe(() => {
    this.updateItems();
  });

  this.changeDetectorRef.markForCheck();
}
private updateItems() {
  this.items.forEach(item => {
    item.selected = this.selected === item.value;
  });
}

如果我添加

setTimeout(() => {
  this.changeDetectorRef.markForCheck();
});

然后用户界面将被更新,但我不明白为什么它需要。

第二 . 当我尝试更新的属性 ViewChild -引发ExpressionChanged错误。示例- https://stackblitz.com/edit/angular-expression-has-changed-viewchild-hostbinding .

@ViewChild(ItemComponent) item: ItemComponent;

...

ngAfterViewInit() {
  this.item.selected = true;
  this.changeDetectorRef.markForCheck();
}

为什么呢?通常 markForCheck 调用可防止错误。