Как установить значение свойства вложенного элемента, чтобы сделать его видимым с помощью директивы * ngIf

Question

Я создал компонент для повторного использования вращающегося коврика из материала angular. Мне это нужно, чтобы не ставить для каждой страницы один и тот же код. Вот код, который работает:

<div id="overlayProgressSpinner">
    <div class="center">
    <mat-progress-spinner
        style="margin:0 auto;"
        mode="indeterminate"
        diameter="100"
        *ngIf="loading">
    </mat-progress-spinner>
    </div>
</div>

Это просто. Только для установки «загрузки» как истина или ложь. Что я сделал?

Я поместил код выше в пользовательский компонент. Теперь это выглядит так:

<app-progress-spinner></app-progress-spinner>

его код HTML такой же, а его код TS выглядит следующим образом:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-progress-spinner',
  templateUrl: './progress-spinner.component.html',
  styleUrls: ['./progress-spinner.component.scss']
})
export class ProgressSpinnerComponent implements OnInit {
  loading = false;
  constructor() { }

  ngOnInit() {
  }

  public isLoading(value: boolean) {
    this.loading = value;

  }

  public changeSpinnerCSSClass() {
    const htmlDivElement = (window.document.getElementById('overlayProgressSpinner') as HTMLDivElement);
    if (this.loading) {
      htmlDivElement.className = 'overlay';
    } else {
      htmlDivElement.className = '';
    }
  }

}

, когда свойство "loading" принадлежит текущий компонент, я могу показать и скрыть компонент "mat-progress-spinner". В противном случае, когда он принадлежит «app-progress-spinner», он установлен, но не отображается. Код, который я пытаюсь сделать видимым, выглядит следующим образом:

          this.progressSpinner.isLoading(false); // it is set, but it does not work.
          this.progressSpinner.changeSpinnerCSSClass(); // it works

кажется, что * ngIf = "загрузка" не может быть установлена, используя подход, работающий, если логика c позади принадлежит текущий компонент.

Как этого добиться?

Answer 1

Вам необходимо создать input в вашем ProgressSpinnerComponent. Для этого добавьте декоратор @Input() перед свойством loading:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-progress-spinner',
  templateUrl: './progress-spinner.component.html',
  styleUrls: ['./progress-spinner.component.scss']
})
export class ProgressSpinnerComponent implements OnInit {
 @Input() loading = false;

Так что везде, где вам нужно использовать app-progress-spinner, вы делаете:

<app-progress-spinner [loading]="loading"></app-progress-spinner>

Примечание: Переменная loading, назначенная входу loading, принадлежит компоненту, содержащему app-progress-spinner.

Это происходит потому, что каждый компонент имеет свою область видимости. Это означает, что он не имеет доступа к внешнему миру, если вы не создадите input или output для получения или отправки данных. Также есть модель ngModel, которую можно использовать для двунаправленных данных, но в большинстве случаев не рекомендуется.