angular - 如何在 *ngIf 的 else 部分指向其他组件

Question

扩展名为 my previous question ，这是我需要在 *ngIf 的其他部分使用模板的另一种情况

这是我当前的代码，我在每个页面上使用加载微调器，直到 API 响应返回

   <ng-container *ngIf="!isLoading; else spinner">
         <form [formGroup]="myForm" novalidate (ngSubmit)="submit()" >
            // form content 
         </form>
    </ng-container>
    <ng-template #spinner>
        <div class="fa-3x tc">
            <i class="fas fa-spinner fa-spin"></i>
        </div>
    </ng-template>

这样我们必须在每个页面上编写相同的 #spinner 组件，所以我创建了一个具有相同内容的组件。

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

@Component({
    selector: 'app-display-loading',
    styles: [`.load__spinner { color: black; text-align: center; font-size: 30px;}`],
    template: `
        <ng-template>
            <div class="load__spinner"> <i class="fas fa-spinner fa-spin"></i></div>
        </ng-template>
    `,
    preserveWhitespaces: true
})

export class DisplayLoadingComponent {
    constructor() {
        console.log('display loading called');
    }
}

现在我的问题是如何使用这个 <app-display-loading> *ngIf

中的组件

或者这可能不是正确的方法。请建议如何执行此操作。

Answer 1

Angular 结构指令可以帮助我们在 ngIf 指令的 else 部分指向其他组件。

您需要做的就是创建补充内置 ngIf 指令的指令。

最终的语法应该是这样的:

<div *ngIf="model withLoading">
  Model
</div>

这只是一颗糖:

<ng-template [ngIf]="model" [ngIfWithLoading]="null">
  <div>
      Model
  </div>
</ng-template>

这里是指令本身:

@Directive({
  selector: '[ngIfWithLoading]',
})
export class LoadingDirective {
  @Input() set ngIf(val: any) {
    if (!val) {
      const factory = this.resolver.resolveComponentFactory(LoadingComponent);
      this.vcRef.createComponent(factory)
    }
  };

  constructor(private vcRef: ViewContainerRef, private resolver: ComponentFactoryResolver) { }
}

因此，一旦模型为假，上面的指令就会放置您的 LoadingComponent 而不是模型模板。

不要忘记将 LoadingComponent 包含到 entryComponents 数组中

Ng-run Example

另见

• https://twitter.com/yurzui/status/1057167356626132992