Angular 2 变更检测，ngClass 模型被同级组件更新但模板没有刷新

Question

我的设置是这样的：

main.ts - 正常结构，没有问题

app.component.ts - 正常结构，没有问题

app.component.html

<navigation-cart></navigation-cart>
<div id="content">
    ... other stuff ...
    <start-arrow></start-arrow>
</div>

ui-layout.service.ts - 此服务负责打开和关闭应用程序中的所有区域。

import {Injectable} from '@angular/core';

@Injectable()

export class UiLayoutService {

    startArrowIsVisible: boolean = true;

    openStartArrow() {
        this.startArrowIsVisible = true;
        console.log('openStartArrow', this.startArrowIsVisible);
    }

    closeStartArrow() {
        this.startArrowIsVisible = false;
        console.log('closeStartArrow', this.startArrowIsVisible);
    }
    ...

}

navigation-cart.component.ts 和 start-arrow.component.ts 都有 UiLayoutService 注入

开始-arrow.component.html

<a (click)="uiLayoutService.openStartArrow();">Open</a>
<a (click)="uiLayoutService.closeStartArrow();">Close</a>

<div id="start-arrow" [ngClass]="{active: uiLayoutService.startArrowIsVisible}">
    ... Some pretty content here ...
</div>

导航-cart.component.html

<a (click)="uiLayoutService.openStartArrow();">Open</a>
<a (click)="uiLayoutService.closeStartArrow();">Close</a>
... Some other content...

这是困扰我的问题：

如果我单击 <start-arrow> 中的 Open 和 Close 链接，一切正常。模板得到更新，<div id="start-arrow"> 得到关闭和/或按预期重新打开。控制台显示这些操作运行就好了。
如果我从 <navigation-cart> 中单击 Open 和 Close 链接，控制台会触发消息，我看到 startArrowIsVisible 值得到更新，但没有模板更新发生在 <start-arrow>。 [ngClass]="{active: uiLayoutService.startArrowIsVisible} 似乎没有触发模板更新。我想这是因为为了防止不必要地渲染所有应用程序的布局而进行的优化。在这种情况下如何触发布局刷新？

Answer 1

我假设您多次提供 UiLayoutService 服务，并且在单击时，该值在与组件视图绑定到的实例不同的实例上更新。 Angular DI 为每个提供者创建一个新实例。如果你想在你的应用程序之间共享一个实例，只需在根组件（或另一个公共父组件）上共享一次

Angular 2 变更检测，ngClass 模型被同级组件更新但模板没有刷新

Angular 2 change detection, ngClass model gets updated by sibling component but the template does't get refreshed

javascript

ng-class

angular