角度 2 - 负载共享服务答案

【问题标题】：angular 2 - Share Service On Load角度 2 - 负载共享服务
【发布时间】：2017-08-01 17:09:27
【问题描述】：

我正在尝试将服务共享给一个组件，为此，我创建了 service.ts，代码如下所示：

import { Subject } from 'rxjs/Subject';

export class CommonService {
    CommonList = new Subject<any>();
}

当然，这个服务在 app.module.ts 的提供者列表中然后，我有一个组件侧边栏。我正在从侧边栏组件订阅此服务：

  ngOnInit() {
    this.subscription = this.CommonServicePrivate.CommonList.subscribe(
      (result: any) => {
        console.log(result);
      }
    );
  }

这就是问题所在，如果我尝试通过某种方法从 app.component.ts 在此服务中添加一些列表：

  click(){
   this.CommonService.CommonList.next([{"some_key":"some_value"}]);
  }

这确实有效，但是当我尝试这个时：

  ngOnInit(){
    this.CommonService.CommonList.next([{"some_key":"some_value"}]); 
  }

它不起作用。

关键是我想将此服务传递给加载应用程序的组件。

在 ngAfterViewInit 的情况下，当我尝试将此结果呈现给某个模板时，我收到错误消息： ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：'未定义'。当前值：

如果有人有这种经历，请分享给我。谢谢。

【问题讨论】：

我猜你是在组件加载之前寻找路由器解析，你需要组件中的数据吗？
是的，因为关于侧边栏的信息来自Rest API，我需要自动加载它，但另一点是这个侧边栏我也应该加载到另一个组件中，所以我真的不想要调用此 API 两次，解决方案是我将其存储在服务中，并从组件中调用此服务，但问题正如我所提到的：通过方法它可以工作，但是 onload - 它不起作用，有时会给我错误：例外：表达式在检查后发生了变化。

标签： angular

【解决方案1】：

我可以建议解决 ExpressionChangedAfterItHasBeenCheckedError 的问题。

正如 gunter 在这里指出的那样，这是一个真正的错误 https://stackoverflow.com/a/43375600/2708210

您可以做的是在 setTimeout 内进行调用，我遇到了这个问题，这是一种解决方法。

 this.subscription = this.service.spinner$
  .subscribe(item => setTimeout(() => this.showProgress = item, 0));

这是来自我的应用程序git link的一段代码

【讨论】：

似乎工作，但我有点想知道 setTimeout，我的意思是，如果这个服务需要一些时间，例如 2 秒从某个 api 获取然后加载到它，会发生什么？你测试过这种情况吗？
是的，我将它用于 firebase 场景，它工作正常，所以每次我的组件 loafsbthe 值来回变化时我的情况都是农场，所以这是唯一的方法 + 不会妨碍 aot 构建跨度>
是的，我现在也进行了测试，刚刚制作了带有睡眠功能的 php 文件并从 angular 调用它，它可以工作，谢谢你:)

【解决方案2】：

Subject 在订阅它时会发出它的订阅值。当您从ngOnInit 向您的CommonList 推送价值时，它确实会发出价值。但是底层的内部组件（事件订阅）还没有发生。

你可以通过使用ngAfterViewInit生命周期钩子来解决这个问题，它可以确保内部组件树已经被初始化（期望内容投影）。本质上，它将确保组件subscription 已经发生。

ngAfterViewInit(){
  this.CommonService.CommonList.next([{"some_key":"some_value"}]); 
}

或者实现相同目标的另一种方法是使用BehaviourSubject，而不是Subject。这两者之间的区别在于BehaviourSubject 存储并发出其最后一个订阅。

【讨论】：

不，在这种情况下还有另一个问题，这应该在模板中呈现，所以我一直收到错误：ExpressionChangedAfterItHasBeenCheckedError：Expression has changed after it is checked。以前的值：'未定义'。当前值：
@mr_e30 你试过了吗？