Angular 2 :使用服务共享组件参考

Question

我有一个称为"树"的角组件。我想要的是从应用程序中的任何其他组件中调用树上的方法。我的整个应用程序随时只有一棵树。可以在我想查看的地方创建组件并使用服务以这种方式共享组件：

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中的好习惯？

edit1：我忘了指定我无法从库中导入Treecomponent代码。

Answer 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 $，以始终知道哪个节点处于活动状态。

Answer 2

有多种方法可以实现您要寻找的东西：

• 事件驱动

您可以使用中介图案将事件派遣到"树"组件。 您可以为此找到多个Libs。例如：EventEmitter2

• 注入组件具有值

您可以注入组件本身具有值，然后在应用程序上到处使用它。注射厂的一个例子。

最好，何塞