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

Question

我有一个名为“树”的角度组件。我想要的是从我的应用程序中的任何其他组件调用树上的方法。任何时候我的整个应用程序中只会有一棵树。是否可以在我想要查看它的位置创建组件并以这种方式使用服务共享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();
    }

}

这是Angular 2中的一个好习惯还是MVC中的好习惯？

Edit1：我忘了指定我无法访问从库中导入的TreeComponent代码。

Answer 1

这不是共享服务体系结构的推荐方法。原因是因为这会在组件之间产生紧密耦合。所有消费者都需要知道树服务和树组件的具体实现细节，如果需要改变，每个消费者都会破坏。应该公开的方式是一个简单的服务api，它提供了一种设置和订阅共享数据的方法。这意味着您只需要维护服务的API，然后实现本身就可以非常灵活。它还使您的代码更容易阅读，更明显的是发生了什么。有人捅了他们的脑袋可能会发现这个应用程序组件正在设置一个关于Init的树引用并且无法理解，这有点神秘。由于您对类似功能的需求更多，因此该解决方案也无法真正扩展

这是如何实现的：

@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

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

• 事件驱动

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

• 注入组件有价值

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

最好的，何塞