Angular 4多模板开发咨询：同一组件内实现三个模板视图的方法

嘿，既然你已经搞定了两个模板的渲染，扩展到三个其实没什么难度！Angular提供了几种直观的方案，我给你挑两种最实用的来讲解：

方法一：用*ngIf多条件判断（适合简单场景） #

这种方式最直接，适合模板逻辑不复杂的情况。你只需要在组件类里定义一个用来控制视图切换的变量，然后给每个模板加上对应的*ngIf判断就行。

组件类代码 #

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

@Component({
  selector: 'app-multi-template',
  templateUrl: './multi-template.component.html'
})
export class MultiTemplateComponent {
  // 用这个变量控制显示哪个模板，初始默认显示view1
  activeTemplate: string = 'view1';

  // 切换模板的方法，你可以根据业务逻辑调用（比如按钮点击）
  switchTemplate(templateName: string) {
    this.activeTemplate = templateName;
  }
}

模板代码 #

<!-- 模板1 -->
<div *ngIf="activeTemplate === 'view1'">
  <h3>这是第一个模板</h3>
  <p>模板1的内容区域</p>
</div>

<!-- 模板2 -->
<div *ngIf="activeTemplate === 'view2'">
  <h3>这是第二个模板</h3>
  <p>模板2的内容区域</p>
</div>

<!-- 模板3 -->
<div *ngIf="activeTemplate === 'view3'">
  <h3>这是第三个模板</h3>
  <p>模板3的内容区域</p>
</div>

<!-- 可以加几个切换按钮测试 -->
<button (click)="switchTemplate('view1')">显示模板1</button>
<button (click)="switchTemplate('view2')">显示模板2</button>
<button (click)="switchTemplate('view3')">显示模板3</button>

方法二：用ngSwitch（适合多分支场景） #

如果以后可能还要加更多模板，用ngSwitch会让代码结构更清晰，避免一堆*ngIf堆叠。

模板代码（组件类和上面一样，不用改） #

<ng-container [ngSwitch]="activeTemplate">
  <!-- 模板1 -->
  <div *ngSwitchCase="'view1'">
    <h3>这是第一个模板</h3>
    <p>模板1的内容区域</p>
  </div>

  <!-- 模板2 -->
  <div *ngSwitchCase="'view2'">
    <h3>这是第二个模板</h3>
    <p>模板2的内容区域</p>
  </div>

  <!-- 模板3 -->
  <div *ngSwitchCase="'view3'">
    <h3>这是第三个模板</h3>
    <p>模板3的内容区域</p>
  </div>

  <!-- 默认模板（可选） -->
  <div *ngSwitchDefault>
    <h3>默认显示的模板</h3>
    <p>当activeTemplate不匹配任何case时显示</p>
  </div>
</ng-container>

<!-- 切换按钮和之前一样 -->
<button (click)="switchTemplate('view1')">显示模板1</button>
<button (click)="switchTemplate('view2')">显示模板2</button>
<button (click)="switchTemplate('view3')">显示模板3</button>

进阶方案：用ngTemplateOutlet（适合模板复用场景） #

如果你的模板需要在多个地方复用，或者想把模板定义和渲染逻辑分开，可以用ngTemplateOutlet：

模板代码 #

<!-- 先定义三个模板引用 -->
<ng-template #template1>
  <h3>这是第一个模板</h3>
  <p>模板1的内容区域</p>
</ng-template>

<ng-template #template2>
  <h3>这是第二个模板</h3>
  <p>模板2的内容区域</p>
</ng-template>

<ng-template #template3>
  <h3>这是第三个模板</h3>
  <p>模板3的内容区域</p>
</ng-template>

<!-- 动态渲染选中的模板 -->
<ng-container *ngTemplateOutlet="currentTemplate"></ng-container>

<!-- 切换按钮 -->
<button (click)="currentTemplate = template1">显示模板1</button>
<button (click)="currentTemplate = template2">显示模板2</button>
<button (click)="currentTemplate = template3">显示模板3</button>

组件类代码 #

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-multi-template',
  templateUrl: './multi-template.component.html'
})
export class MultiTemplateComponent {
  // 获取模板引用
  @ViewChild('template1') template1!: TemplateRef<any>;
  @ViewChild('template2') template2!: TemplateRef<any>;
  @ViewChild('template3') template3!: TemplateRef<any>;

  // 默认显示第一个模板
  currentTemplate!: TemplateRef<any>;

  ngAfterViewInit() {
    this.currentTemplate = this.template1;
  }
}

这几种方案都能在Angular 4里正常运行，你可以根据自己的业务场景选最合适的。如果是简单的三模板切换，用ngSwitch就足够清晰了；要是需要复用模板，就选ngTemplateOutlet。

内容的提问来源于stack exchange，提问作者André Costa