Javascript 有棱角的如何根据服务切换组件'；行为

假设我有两个组件，

a组件

和

b组件

。我在

AppComponent

我有服务

myService

，它有方法

.trigger（）

我只想显示

a组件

，但每当我从代码的另一部分调用

myService.trigger（）

，它就会切换并显示

b组件

。这是我无法实现的完美实现

问题是：可以这样做吗？如果不是，最好的解决方案是什么

我得到的唯一有效解决方案是：

我在

AppComponent

导出类AppComponent{
标题=‘spa’；
show:boolean=false；
触发器（）{
this.show=true；
}
}

和渲染组件，如下所示：

然后，每当我想触发切换时，我都会将应用程序的实例添加到构造函数中，并调用它的方法：

导出类另一个组件实现OnInit{
建造师(
私有应用程序：AppComponent
) {}
ngOnInit（）：void{
this.app.trigger（）；
}
}

---

尽管它运行得很好，但我自己认为这是一个肮脏的解决方案组件不打算在另一个组件中使用，但服务是。

在不同组件和服务之间进行通信的一种方式是通过“主题”

---

您可以尝试创建一个主题，并从

myService.trigger（）

向其传递值。你可以从任何你想访问触发数据的组件订阅该主题。

在不同组件和服务之间进行通信的一种方式是通过“主题”

---

您可以尝试创建一个主题，并从

myService.trigger（）

向其传递值。你可以从任何你想访问触发数据的组件订阅

主题

。

你可以从

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;
    }
}

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

<div *ngIf="!show; else show">
  <app-a></app-a>
</div>

<ng-template #show>
  <app-b></app-b>
</ng-template>

---

您可以使用

rxjs

库中的

Subject

在您的服务文件中：

// 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;
    }
}

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

<div *ngIf="!show; else show">
  <app-a></app-a>
</div>

<ng-template #show>
  <app-b></app-b>
</ng-template>

---

谢谢伙计们，你们是最棒的！30分钟后回答，这太不可思议了。。一切都正常工作，我想要的方式：）谢谢！伙计们，你们是最棒的！30分钟后回答，这太不可思议了。。一切工作正常，符合我的要求：）