Угловой 6 - Контроль, является ли компонент видимым или нет из сервисных или других компонентов

Question

У меня есть компонент, на котором есть спиннер, и он размещен в app.component.html

<app-spinner *ngIf="isLoading"></app-spinner>

на моем app.component.ts. Для начала я установил isLoading в False.

Тогда у меня есть служба, которая содержит методы, такие как getData.

getData() {
    // show spinner
    this.http.get('url here');
    // Hide Spinner
}

Мой вопрос ... Если спиннер находится на app.component.html и .ts и имеет переменнуютам, что показывает и скрывает это ... Как я могу изменить это значение из других компонентов или из службы, которая живет в app.component.ts, если нет лучшего способа сделать это?

Answer 1

Подпишитесь на метод service в вашем app.component.ts и установите логическое значение isLoading, когда вы подписываетесь на ответ метода getData () службы.

   getDataFromService() {
    // show spinner whilst waiting for the request
    this.isLoading = true;
    this.yourServiceName.getData()
      .subscribe(res => {
        // Hide spinner when res is received
        this.isLoading = false;
        // do something with the repsonse
        console.log(res);
      });
   }

Answer 2

Используйте Subject или BehaviorSubject в своей службе и используйте метод подписки на то же самое из вашего компонента, чтобы получить последнее значение.

service.ts file

isLoading = true;
public loader = new BehaviorSubject(isLoading)

getData(){
 this.http.get(this.url).subscribe(()=>{
  this.isLoading = false
  this.loader.next(this.isLoading)
})

.component.ts

ngOnInit(){
 this.testService.loader.subscribe(value=>console.log(value))
}