带有 Angular 动态组件加载的模型中的 Observable 出错答案

【问题标题】：Error with an Observable in model with Angular dynamic component loading带有 Angular 动态组件加载的模型中的 Observable 出错
【发布时间】：2018-06-26 02:26:55
【问题描述】：

我有一个我已经使用了一段时间的动态组件。现在我想在其模型中添加一个“Observable”，以便我可以从组件外部触发更改。所以我有一个服务（组件外部）：

  public menuToggleSubject = new Subject<any>();
  public menuToggleSubjectTrigger: Observable<any> = this.menuToggleSubject.asObservable();

  public toggleMenu() {
    this.menuToggleSubject.next();
  }

在我的组件模型中：

export class LayoutHeader {
    constructor(public sideNavToggleSubjectTrigger: Observable<any>
    ) {}

然后，在我加载动态组件的组件中，我有：

this.item = { sideNavToggleSubjectTrigger: this.siteService.menuToggleSubjectTrigger };

但是，我收到以下错误：

错误 TS2322: Type '{ (removed): ({ component: typeof (removed) 是不可分配给类型“LayoutHeader”。财产类型 “sideNavToggleSubjectTrigger”不兼容。类型 'Observable' 不可分配给类型 'Observable'。二存在具有此名称的不同类型，但它们是不相关的。财产 “源”在“可观察”类型中受保护，但在类型中是公共的 “可观察”。

注意：我确实删除了上面一些不相关的文本（为了清楚起见，我删除了 LayoutHeader 类的其他成员）。我认为主要的错误/问题是 Observable 的两个定义不匹配。但我不知道为什么。

【问题讨论】：

检查可观察的导入。
@cgTag - 我做到了。在这两种情况下，它们都是： import { Observable } from "rxjs/Observable";但是，可能是我的动态加载的组件对 rxjs 有“^5.5.8”，而主项目有“5.5.6”。我会尽量让它们都一样。

标签： angular

【解决方案1】：

我对 cgTag 的回应是正确的，即动态加载的组件中的 rxjs 和该组件的主机需要是相同的版本。一旦我将两个 package.json 更新到相同的版本，一切都很好。我是对的，但我不喜欢它:)，因为这会创建一个非常脆弱的链接。如果有人知道解决此问题的方法，请告诉我。 I plan on asking a separate SO question for this

【讨论】：