angular - * ngTemplateOutlet指令的实际情况是什么？

我正在阅读有关*ngTemplateOutlet指令的信息。此伪指令的使用是通过模板引用和上下文对象作为参数来动态实例化模板。

我想知道的是，我们在Angular中有很多事情可以实现与* ngTemplateOutlet相同的结果，例如:

我们可以有多个*ngIf，它们可以基于同一组件中的组件变量值来呈现不同的模板。我们以类似的方式拥有[ngSwitch]，它将根据不同的值为我们呈现不同的模板。

通过引用相应变量的模板引用变量，我们可以将引用与*ngIf一起使用。

对于前一种情况:

<div *ngIf="condition1"> Content 1 </div>
<div *ngIf="condition2"> Content 2 </div>
<div *ngIf="condition3"> Content 3 </div>

对于后者:

<ng-container *ngIf="condition then myTemplate else otherTemplate"></ng-container>
<ng-template #myTemplate> Some content... </ng-template>
<ng-template #otherTemplate> Some content... </ng-template>

如果我们的武库中有这样的方法，*ngTemplateOutlet还会增加什么值(value)？

有哪些实际用例(如果有的话)不能使用上述方法，而应使用*ngTemplateOutlet指令，还是从中选择一种获得相同结果的方法？

最佳答案

角template outlets可用于在 View 的各个部分中插入通用模板，这些模板不是由循环生成或受条件约束的。例如，您可以定义公司徽标的模板，然后将其插入页面中的多个位置:

<div>
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
  <h1>Company History</h1>
  <div>{{companyHistory}}</div>
</div>
<form (ngSubmit)="onSubmit()">
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
  <h1>User info</h1>
  <label>Name:</label><input type="text" [(ngModel)]="userName" />
  <label>Account ID:</label><input type="text" [(ngModel)]="accountId" />
  <button>Submit</button>
</form>
<div class="footer">
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
</div>

<ng-template #companyLogoTemplate>
  <div class="companyLogo">
    <img [src]="logoSourceUrl">
    <label>The ACME company, {{employeeCount}} people working for you!</label>
  </div>
</ng-template>

模板和模板导出还可以帮助使组件可配置。以下示例是this article从Angular University提取的。

选项卡容器组件定义了默认的选项卡头模板，但允许使用定义为输入属性的自定义模板覆盖它。然后将适当的模板(默认模板或自定义模板)插入带有模板导出的 View 中:

@Component({
  selector: 'tab-container',
  template: `
    <ng-template #defaultTabButtons>
      <div class="default-tab-buttons">
        ...
      </div>
    </ng-template>
    <ng-container *ngTemplateOutlet="headerTemplate || defaultTabButtons"></ng-container>
    ... rest of tab container component ...
  `
})
export class TabContainerComponent {
    @Input() headerTemplate: TemplateRef<any>; // Custom template provided by parent
}

在父组件中，定义自定义选项卡头模板并将其传递给选项卡容器组件:

@Component({
  selector: 'app-root',
  template: `
    <ng-template #customTabButtons>
      <div class="custom-class">
        <button class="tab-button" (click)="login()">
          {{loginText}}
        </button>
        <button class="tab-button" (click)="signUp()">
          {{signUpText}}
        </button>
      </div>
    </ng-template>
    <tab-container [headerTemplate]="customTabButtons"></tab-container>
  `
})
export class AppComponent implements OnInit {
  ...
}

您可以通过this blog post在alligator.io中看到另一个高级用例。

关于angular - * ngTemplateOutlet指令的实际情况是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52908844/