从 HTML 模板中设置全局 Angular 变量

Question

我的主要AppComponent 中有一个微调器组件，如下所示：template: <app-spinner></app-spinner>。这是微调器组件：

@Component({
  selector: 'app-spinner',
  template: `
    <div *ngIf="spinner.isVisible() | async" class="spinner">
      <div class="loading"></div>
    </div>
  `
})
export class SpinnerComponent {
  constructor(public spinner: SpinnerService) {}
}

这里是微调器服务：

@Injectable()
export class SpinnerService {
  private visible$ = new BehaviorSubject < boolean > (false);

  show() {
    this.visible$.next(true);
  }

  hide() {
    this.visible$.next(false);
  }

  isVisible(): Observable < boolean > {
    return this.visible$.asObservable().pipe(share());
  }
}

我可以通过注入 SpinnerService 并调用 show()... 轻松地显示来自任何组件的微调器...但是我还希望能够在任何组件中执行以下操作：

<div *ngIf="userObservable | async as user; else loading">
  Hello {{user.name}}!
</div>
<ng-template #loading>Somehow do something here to set the spinner visibility and switch it off later?!</ng-template>

我也非常愿意使用全局注入变量而不是Subject。有什么想法吗？

提示：我们能否以某种方式定义“全局template reference variable”之类的东西？！

Answer 1

我想你想在加载过程中显示微调器，比如网络调用。如果是这种情况，您可以在组件showSpinner 中设置一个布尔变量，最初设置为true，在您的ngOnInit（或您需要的地方）中拨打电话，然后将showSpinner 设置为false订阅，当您从网络调用中获得结果时。

您可以在 HTML 中的 *ngIf 中使用该变量，以便仅在必要时显示微调器。

Answer 2

一种方法是：

<div *ngIf="userObservable | async as user; else loading">
  Hello {{user.name}}!
</div>
<ng-template #loading> <div class="loading"></div></ng-template>

我的要求是拥有最顶层的组件（app-spinner）“get 以某种方式激活”

reference variable(#var) 的范围是整个模板。 这意味着您只能在当前模板中访问。您无法从任何其他模板上下文（其他组件...）中获取 #variable

Use Angular template reference variables anywhere in the template... not!

你也可以看看这个[answer]。 它通过使用Interceptor

解决了全局状态下的加载问题