Показать элемент на основе служебной переменной (устанавливается другим компонентом)

Question

У меня есть приложение, в котором я пытаюсь показать или скрыть элемент на основе публичной переменной в сервисе. Эта переменная создается как show: boolean = false;, но затем устанавливается из дочерних компонентов.

Моя проблема в том, что show, кажется, никогда не обновляет свое значение.

Выполняя различные отладки, я обнаружил, что для show установлено любое первоначальное значение, но как только инициализация представления завершится, мой инспектор показывает, что show не определено, хотя это может не относиться к моей проблеме.

Итак, как я могу показать родительский элемент из дочернего компонента?

Код ниже:

app.component.html

<div *ngIf="appService.show"> Loading </div>
<div *ngIf="!appService.show"> Content </div>

app.component

export class AppComponent implements OnInit {

    constructor(private appService: AppService) {}

    ngOnInit() {}
}

app.service

export class AppService {

    public show: boolean = false;

    showLoader() {
        this.show = true;
    }

    hideLoader() {
        this.show = false;
    }
}

child.component

export class ChildComponent implements OnInit {

    constructor(private appService: AppService) {}

// This is just an example, I've got the showLoader() method firing after a subscription completes.
    ngOnInit(){
        this.appService.showLoader();
    }
}

Answer 1

Лучший способ сделать это - создать наблюдаемое для управления состоянием загрузки. Я предпочитаю использовать BehaviorSubject, потому что он запоминает последнее значение, которое он испустил. Вы можете иметь несколько компонентов подписаться на сервис загрузки. (больше на предметах поведения здесь ).

Вот ссылка на стек, где я реализовал простую версию этой службы загрузчика: https://stackblitz.com/edit/angular-loading-service-subscribe

РЕДАКТИРОВАТЬ: я добавил код для child.component в ответ. У меня это было в стеке, но я забыл добавить его сюда.

Ключевые примечания:

loading.service.ts имеет BehaviorSubject, который определяет, загружает ли приложение данные или нет. Он возвращает себя .asObservable(), поэтому никакие дочерние компоненты не могут вызывать .next() для него.

export class LoadingService { 

  private _isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

  get isLoading$(): Observable<boolean> { 
     return this._isLoading$.asObservable();
  }

   // see the rest of the code in the stackblitz 
}

Как только это подключено, введите его в компонент.

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    // by making it public, you can subscribe in the template
    constructor(public loadingService: LoadingService) { }
}

app.component.html

<ng-template [ngIf]="loadingService.isLoading$ | async" [ngIfElse]="loaded">
  Loading  
</ng-template>

<ng-template #loaded>
  Content has loaded
</ng-template>

<!-- see child.component -->
<child></child>

child.component может управлять индикатором загрузки с помощью loading.service.

@Component({
  selector: 'child',
  template: `
    <h1>Child Component</h1>
    <button (click)="toggleLoading()">Change Loading</button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class ChildComponent {

  constructor(public loadingService: LoadingService) { }

  // simulates a 3 second load time for fetching data
  ngOnInit() {
    this.loadingService.startLoading();
    setTimeout(() => {
      this.loadingService.stopLoading();
    }, 3000);
  }

  // simple method to simulate user action that loads some new data
  toggleLoading(): void {
    this.loadingService.toggleLoading();
  }
}

проверьте этот ресурс для получения информации о ng-template: https://toddmotto.com/angular-ngif-else-then

и этот для async трубы: https://angular.io/api/common/AsyncPipe

Answer 2

Сделайте поле показа видимым