角。如何根据服务的操作切换组件

Question

假设我有 2 个组件，aComponent并且bComponent. 我把它们重新放在里面AppComponent<app-a><app-b>而且我有myService有方法的服务.trigger()。我想要的是仅显示aComponent，但每当我myService.trigger()从另一部分代码调用时，它就会切换并显示bComponent。这是我无法达到的完美实现。问题是：有可能这样做吗？如果不是什么是最好的最接近的解决方案。我得到的唯一可行的解决方案：我.trigger()在里面加了AppComponentexport class AppComponent {  title = 'spa';  show: boolean = false;  trigger() {    this.show = true;  }}并像这样渲染组件：<div *ngIf="!show; else show">  <app-a></app-a></div><ng-template #show>  <app-b></app-b></ng-template>然后每当我想触发切换时，我将应用程序的实例添加到构造函数并调用它的方法：export class AnotherComponent implements OnInit {  constructor(    private app: AppComponent  ) {}  ngOnInit(): void {    this.app.trigger();  }}即使它工作得很好，我自己也看到这是一个肮脏的解决方案。组件不打算在另一个组件内部使用，但服务是。

Answer 1

你可以Subject从rxjs图书馆使用。

在您的服务文件中：

// a-service.service.ts

import { Injectable } from '@angular/core';

import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })

export class AService {

    private subject = new Subject<any>();

    trigger(state: boolean) {

        this.subject.next(state);

    }

    getTrigger(): Subject<any> {

        return this.subject;

    }

}

在你的AppComponent：

// app.component.ts

...

private show = false;

constructor (private aService: AService) { }

ngOnInit() {

    this.aService.getTrigger().subscribe(state => {

        this.show = state;

    });

}

模板可以是您提供的 - 很好：

<div *ngIf="!show; else show">

  <app-a></app-a>

</div>

<ng-template #show>

  <app-b></app-b>

</ng-template>

如果你想从另一个组件触发，你可以这样做：

// another.component.ts

...    

constructor (private aService: AService) { }

ngOnInit() {

    this.aService.trigger(true);

}

Answer 2

在不直接相关的不同组件和服务之间进行通信的一种方法是通过“主题”。

您可以尝试创建一个主题并将值从myService.trigger(). subject您可以从要访问该触发器数据的任何组件订阅它。