如何使用Angular(5)ng-template实现加载微调器? [英] How to implement a loading spinner with a Angular (5) ng-template?

问题描述

我有一个结帐页面，用户必须先登录才能继续. 用户可以已经登录.在每种情况下，我都想在组件检测到用户是否登录时显示一个微调框.

I've a checkout page where the user has to login before he can proceed. The user can be logged on already. In every scenario I want to show a spinner when the component detects if the users logged in our not.

check-out.html代码如下:

The check-out.html code looks like:

<div *ngIf="showSpinner">
    <app-spinner></app-spinner>
</div>

<div *ngIf="auth.user | async; then authenticated else guest">
    <!-- template will replace this div -->
</div>

<!-- User NOT logged in -->
<ng-template #guest>
    <div *ngIf="auth.user == null" class="call-to-action">
        login buttons...
    </div>
</ng-template>

<!-- User logged in -->
<ng-template #authenticated>
    payment staps
</ng-template>

我的结帐组件看起来像:

My check-out-component look likes:

export class CheckoutComponent implements OnInit {
  private showSpinner = true;

  constructor(public auth: AuthService,
              private router: Router) {
              }

  ngOnInit() {
    this.auth.user.subscribe(user => {
      this.showSpinner = false;
    });
  }
...

但是(和)始终显示，但是我只想加载微调框，然后再加载#guest或#authenticated.如何完成?

But the the (and the) is always displayed, but I want to load only the spinner and then the #guest or #authenticated. How to accoplish?

如果进行了大量搜索，但发现ngIf仅可以采用if-else构造.

If searched a lot but find that the ngIf only can take a if-else construction.

推荐答案

当我们想使用微调器时，涉及三个组件"

When we want to use a spinner, there are three "components" implicated

服务

export enum loaderCommand { "Begin","End" };

export class LoaderService {
  private loaderSource = new Subject<any>();
  loaderEvent = this.loaderSource.asObservable();

  sendEvent(value: loaderCommand,message?:string) {
    this.loaderSource.next({command:value,message:message});
  }
}

组件加载器

export class LoadingComponent implements OnInit, OnDestroy {

  private isAlive: boolean = true;
  constructor(private loaderService: LoaderService ) { }

  ngOnInit() {
    this.dbsService.dbsEvent.pipe(takeWhile(() => this.isAlive)).subscribe((res: any) => {
      if (res.command == loaderCommand.Begin) {
        this.message = res.message ? res.message : "Loading...";
        //do something to show the spinner
      }
      if (res.command == loaderCommand.End)
        //do something to hide the spinner
    })
  }
  ngOnDestroy() {
    this.isAlive = false;
  }
}

需要显示/隐藏负载的组件，服务或拦截器

A component, service or interceptor that need show/hide the loading

constructor(private loaderService: loaderService ) { }
//when we want to show the spinner
this.loaderService.sendEvent(loaderCommand.Begin,"Hello word");
//when we want to hide the spinner
this.loaderService.sendEvent(loaderCommand.End);

这篇关于如何使用Angular(5)ng-template实现加载微调器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！