Angular 2,ngOnChanges,ngDoCheck

时间:2017-01-23 06:21:26

标签: javascript angular angular2-template lifecycle

大家好,我有很多人来找你,我想谈谈我无法得到的事情。

简单的服务研究

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

这是一个简单的服务,在触发时提交可观察元素:

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

我还需要说更多吗?这很难看,我得到了100亿无用的检查,但它会起作用。

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工作(另一个解决方案,但看起来更喜欢我避免 我的问题不仅仅是寻找解决方案)

我知道你们很棒,所以如果你知道应该以“正确的方式”做些什么。

祝你有个美好的一天!

2 个答案:

答案 0 :(得分:2)

您是否尝试过移动

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

订阅您的父容器,然后通过

将消息作为输入发送
<alert [message]=message></alert>

这样你还可以在订阅函数中包含一些逻辑来改变你的page-nav-container的显示标志布尔值

答案 1 :(得分:0)

所以在这里我发现结果看起来很棒!

@ViewChild(AlertComponent) AlertComponent: AlertComponent; 

.... 

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

简单,它不需要改变逻辑,也不会丢失任何与ngDocheck()相比较的,它的10000k测试......