Angular. Как переключать компонент в зависимости от действий сервиса

Question

Допустим, у меня есть 2 компонента, aComponent и bComponent. У меня они перенаправлены внутри AppComponent

<app-a>
<app-b>

И у меня есть услуга myService с методом .trigger().

Я хочу показать только aComponent, но всякий раз, когда я вызываю myService.trigger() из другой части кода, он переключается и показывает bComponent. Это идеальная реализация, до которой я не могу добраться.

Вопрос: Можно ли так сделать? И если не самое лучшее, ближайшее решение.

Единственное рабочее решение, которое у меня получилось:

Я добавил .trigger() внутри AppComponent

export 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 из любого компонента, который хотите получить доступ к этим данным триггера.