角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>

你拿到了吗？我想要做的是，当嵌套组件收到警报时，它应该转到页面导航类。

我找到了一个解决方案，这不是一个如何让它工作的问题，而是找到正确的一个，做一些人们会为之骄傲的东西？

ngDoCheck

我还需要说更多吗？它很丑，我得到了1000000000张没用的支票，但它会有用的。

ngDoChanges

只有当我的组件中的某个东西真正得到“更改”时才会发生，对吗？

所以我试了一下：

<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'.

其他测试

• 我已经尝试将direclty这个服务包含到容器中(同样的问题)。
• 我将警报移到组件之外，使用 ngOnChanges工作(另一种解决方案，但看起来更像是在回避我的问题，而不是找到解决方案)

我知道你们很棒，所以如果你们对应该以正确的方式做什么有任何想法的话。

祝你度过美好的一天！

Answer 1

你有没有试过移动

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

订阅父容器，然后将消息作为输入发送到

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

这样，还可以包含一些逻辑来更改订阅函数中页-nav-容器的显示标志布尔值。

Answer 2

所以在这里，我发现这个结果看起来很棒！

@ViewChild(AlertComponent) AlertComponent: AlertComponent; 

.... 

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

简单地说，它不需要更改逻辑，也不会与ngDocheck()相比，它的10000 k测试失去任何perf .