Angular 2 - 加载时共享服务

我正在尝试将服务共享给组件，为此，我创建了 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：表达式在检查后已更改。先前值：“未定义”。当前值：

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

我可以建议解决方法ExpressionChangedAfterItHasBeenCheckedError.

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

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

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

这是我的应用程序中的一段代码git link https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/app.component.ts