Angular 2、ngOnChanges、ngDoCheck

Question

大家好，我带着很多想法来找你们，我想谈谈我无法得到的东西。

简单的服务研究

所以我们这里有一个由组件触发的服务。

这是一个简单的服务，当它被触发时提交一个可观察元素：

return this.subject.asObservable();

然后我们有一个组件得到这个：

this.alertService.getMessage().subscribe(message => { this.message = message; });

好的，到目前为止一切正常。这个逻辑包含在一个组件中，他的选择器名称是<alert></alert>

嵌套组件

这里我们有另一个组件 <alert></alert>。

<div class="article-page-container">
  <alert></alert>
  <ul *ngIf="!alert" class="page-nav-container">
    <li *ngFor="let page of pageArray" (click)="pageHandlerEvent(page)" [ngClass]="{ 'page-active': page == pageActive}">{{ page }}</li>
  </ul>
</div>

你收到了吗？我想做的是当嵌套组件收到警报时，它应该关闭页面导航 class.

我找到了一个解决方案，这不是如何让它发挥作用的问题，而是找到正确的解决方案，做出让人们引以为豪的东西？

ngDoCheck

我还需要多说吗？这很丑陋，我得到了 1000000000 个无用的支票，但它会起作用。

ngDoChanges

只有当我的组件内部的某些东西实际上变得 'change' 时才会发生，对吗？

所以我尝试了这个：

<div class="article-page-container">
  <alert (alertOn)="toggleNav($event)"></alert>
  <ul *ngIf="!alert" class="page-nav-container">
    <li *ngFor="let page of pageArray" (click)="pageHandlerEvent(page)" [ngClass]="{ 'page-active': page == pageActive}">{{ page }}</li>
  </ul>
</div>

每次触发警报时，我都会执行一个简单的 this.alertOn.emit(true)、

但是 ngOnChanges 根本不起作用。这将导致：

core.umd.js:3493 ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

其他测试

我已经尝试将此服务直接包含到容器中（相同问题)
我已将警报移到组件外部，使用带有
的输入 ngOnChanges 工作（另一种解决方案，但看起来更像我正在避免我的问题不仅仅是找到解决方案)

我知道你们很棒，所以如果您对 'correct way' 中应该做什么有任何想法。

祝你有愉快的一天！

Answer 1

你试过移动

this.alertService.getMessage().subscribe(message => { this.message = message; });

订阅你的父容器，然后通过

将消息作为输入发送

<alert [message]=message></alert>

通过这种方式，您还可以在订阅函数

中包含一些逻辑来更改 page-nav-container 的显示标志布尔值

Answer 2

所以我发现这里的结果看起来很棒！

@ViewChild(AlertComponent) AlertComponent: AlertComponent; 

.... 

ngAfterContentChecked () {
  this.alert = (this.AlertComponent.message) ? true : false;
}

简单，它不需要更改逻辑，与 ngDocheck() 相比，它不会失去任何性能，因为它有 10000k 个测试...

Angular 2、ngOnChanges、ngDoCheck