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

我想你想在加载过程中显示微调器，就像网络调用一样。如果是这种情况，您可以在组件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）＆＃34; get 激活＆＃34;不知何故

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

获取#variable

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

您还可以查看此[answer]。它使用Interceptor

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

从HTML模板

2 个答案: