Angular 2+：使用服务共享组件引用答案

【问题标题】：Angular 2+: share component reference using a serviceAngular 2+：使用服务共享组件引用
【发布时间】：2017-12-18 23:05:03
【问题描述】：

我有一个名为“tree”的 Angular 组件。我想要的是从我的应用程序中的任何其他组件调用树上的方法。在任何时候，我的整个应用程序中都只有一棵树。是否可以在我想查看它的地方创建组件并以这种方式使用服务共享 componentRef：

export class AppComponent implements OnInit {

    @ViewChild("tree") treeComponent: TreeComponent;

    constructor(private treeService: TreeService) { }

    ngOnInit() {
        this.treeService.setTreeReference(this.treeComponent);
    }

}

那么我可以这样称呼它：

export class OtherComponent {

    constructor(private treeService: TreeService) { }

    getActiveNode() {
        return this.treeService.treeReference.getActiveNode();
    }

}

这是 Angular2+ 还是一般 MVC 中的好习惯？

编辑1：我忘了指明我无权访问 TreeComponent 代码，因为它是从库中导入的。

【问题讨论】：

该服务的消费者需要时刻知道活动节点吗？
不应将树组件本身存储在树服务中，而应允许树服务包含操作树组件所需数据的方法。在树服务上设置一个 on observable(s)，并从树组件订阅它，这样当树组件依赖的某些数据发生变化时（在树服务中），您可以正确更新树组件。跨度>

标签： angular model-view-controller single-page-application

【解决方案1】：

这不是共享服务架构的推荐方法。原因是因为这会在组件之间产生紧密耦合。所有消费者都需要知道树服务和树组件的具体实现细节，如果其中任何一个需要改变，每个消费者都会崩溃。它应该公开的方式是一个简单的服务 api，它公开了一种设置和订阅共享数据的方式。这意味着您只需要维护服务的 API，然后实现本身就可以非常灵活。它还使您的代码更易于阅读，并且更清楚正在发生的事情。有些人可能会发现该应用程序组件正在设置树引用 onIinit 并且无法理解这有点神秘。此解决方案也不能很好地扩展，因为您对类似功能有更多需求

这就是它的实现方式：

@Injectable()
export class TreeService {
  private activeNodeSubject: BehaviorSubject<any> = new BehaviorSubject(null);
  activeNode$ = this.activeNodeSubject.asObservable();
  setActiveNode(node) {
      this.activeNodeSubject.next(node);
  }
}

然后在树组件中，每次发生变化时调用 setActiveNode，所有消费者订阅 activeNode$ 以始终知道哪个节点处于活动状态。

【讨论】：

添加到我原来的问题中，TreeComponent 是从库中导入的，不能从内部使用 TreeService。我应该在 AppComponent 内部做同样的事情吗？
使用外部库使这一点更加真实。我实际上建议在树组件周围创建一个包装器组件来捕获它，而不是在应用程序组件中执行它。如果您需要更改 3d 派对库，这可以隔离您的应用程序。当您可以在应用程序组件中绑定的活动节点更改时，treecomponent 是否会发出事件？
是的，确实如此，这看起来是一个非常好的和干净的策略，谢谢！

【解决方案2】：

有多种方法可以实现您的目标：

事件驱动

您可以使用中介模式将事件分派到“树”组件。您可以为此找到多个库。例如：EventEmitter2

注入组件有值

您可以注入组件本身具有价值，然后在您的应用程序的任何地方使用它。一个example of an injection factory。

最好，何塞

【讨论】：