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

Question

I have an Angular component called "tree". What I want is to call methods on tree from any other component in my app. There will only be one tree in my entire app at any time. Is it ok to create the component in the place I want to view it and share the componentRef using a service this way:

export class AppComponent implements OnInit {

    @ViewChild("tree") treeComponent: TreeComponent;

    constructor(private treeService: TreeService) { }

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

}

Then I could call it this way:

export class OtherComponent {

    constructor(private treeService: TreeService) { }

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

}

Is this a good practice in Angular2+ or generally in MVC?

Edit1: I forgot to specify that I don't have access to the TreeComponent code as it is imported from a library.

Answer 1

This is not the recommended approach to shared service architecture. The reason is because this creates tight coupling between the components. All consumers need to know the specific implementation details of both the tree service and the tree component, if either needs to change, every consumer will break. The way it should be exposed is a simple service api that exposes a way to set and subscribe to the shared data. This means you only need to maintain your service's API and then the implementation itself can be quite flexible. It also makes your code much easier to read and more obvious what's going on. Someone poking their head in might find it kind of mysterious that that app component is setting a tree reference onIinit and wouldn't understand. This solution also doesn't really scale very well as you have more needs of similar functions

This is how it would be achieved:

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

then in tree component, you call setActiveNode every time it changes, and all consumers subscribe to activeNode$ to always know which node is active.

Answer 2

There multiple ways to achieve what you are looking for:

• Event driven

You can dispatch events to your "tree" component by using the mediator pattern. You can find multiple libs for that. For instance: EventEmitter2

• Inject the component has value

You can inject the component itself has value and then use it everywhere on your application. An example of an injection factory .

Best, José