Angular 16+模板条件渲染问题求助（ngTemplateOutlet）

问题场景 #

我在templates.component中定义了3个<ng-template>模板，需要在item.component中根据item的type条件选择对应的模板，传递给header.component通过ngTemplateOutlet渲染，但当前代码无法正常工作。

现有代码 #

templates.component.html #

<ng-template #templateA let-item>
  <p>{{ item.name }} Template A content here...</p>
</ng-template>

<ng-template #templateB let-item>
  <p>{{ item.name }} Template B content here...</p>
</ng-template>

<ng-template #templateC let-item>
  <p>{{ item.name }} Template C content here...</p>
</ng-template>

templates.component.ts #

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

@Component({
  selector: 'app-templates',
  templateUrl: './templates.component.html',
  standalone: true,
  imports: [],
})
export class TemplatesComponent {
  @ViewChild('templateA') templateA!: TemplateRef<any>;
  @ViewChild('templateB') templateB!: TemplateRef<any>;
  @ViewChild('templateC') templateC!: TemplateRef<any>;
}

item.component.html #

<app-header [headerTemplate]="selectedTemplate" [item]="item" />

item.component.ts #

import { Component, Input, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from '../header/header.component';
import { TemplatesComponent } from '../templates/templates.component';
import { Item } from '../services/data.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  standalone: true,
  imports: [CommonModule, HeaderComponent],
  providers: [TemplatesComponent],
})
export class ItemComponent implements OnInit {
  templatesComponent = inject(TemplatesComponent);

  @Input() item!: Item;
  selectedTemplate: TemplateRef<any> | null = null;

  ngOnInit() {
    if (this.item.type) {
      this.selectTemplate();
    }
  }

  selectTemplate(): void {
    if (this.item.type === 'type-a') {
      this.selectedTemplate = this.templatesComponent.templateA;
    } else if (this.item.type === 'type-b') {
      this.selectedTemplate = this.templatesComponent.templateB;
    } else if (this.item.type === 'type-c') {
      this.selectedTemplate = this.templatesComponent.templateC;
    }
  }
}

header.component.html #

<ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: item }"></ng-container>

header.component.ts #

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Item } from '../services/data.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  standalone: true,
  imports: [CommonModule],
})
export class HeaderComponent {
  @Input() headerTemplate: TemplateRef<any> | null = null;
  @Input() item!: Item;
}

问题根源 #

1. TemplatesComponent实例未被渲染：你在ItemComponent的providers数组中声明了TemplatesComponent，这会创建一个该组件的实例，但这个实例从未被Angular挂载到DOM中，因此它的@ViewChild无法获取到<ng-template>的引用，所有模板变量都是undefined。
2. 生命周期钩子时机错误：即使实例正确，ngOnInit执行时@ViewChild还未完成赋值，此时获取模板引用也是空的。

修复方案 #

步骤1：调整ItemComponent的组件引用方式 #

• 移除providers中的TemplatesComponent，将其添加到imports数组中
• 使用@ViewChild获取渲染后的TemplatesComponent实例
• 改用ngAfterViewInit钩子确保模板引用已赋值

修改后的item.component.ts：

import { Component, Input, AfterViewInit, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from '../header/header.component';
import { TemplatesComponent } from '../templates/templates.component';
import { Item } from '../services/data.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  standalone: true,
  imports: [CommonModule, HeaderComponent, TemplatesComponent], // 添加TemplatesComponent到imports
})
export class ItemComponent implements AfterViewInit {
  @ViewChild(TemplatesComponent) templatesComponent!: TemplatesComponent; // 用@ViewChild获取实例

  @Input() item!: Item;
  selectedTemplate: TemplateRef<any> | null = null;

  ngAfterViewInit() { // 改用ngAfterViewInit，确保@ViewChild已赋值
    if (this.item.type) {
      this.selectTemplate();
    }
  }

  selectTemplate(): void {
    switch(this.item.type) {
      case 'type-a':
        this.selectedTemplate = this.templatesComponent.templateA;
        break;
      case 'type-b':
        this.selectedTemplate = this.templatesComponent.templateB;
        break;
      case 'type-c':
        this.selectedTemplate = this.templatesComponent.templateC;
        break;
      default:
        this.selectedTemplate = null;
    }
  }
}

步骤2：修改ItemComponent的模板 #

在item.component.html中添加app-templates组件（仅用于让Angular解析模板，不会渲染可见内容）：

<app-templates></app-templates>
<app-header [headerTemplate]="selectedTemplate" [item]="item" />

额外优化建议 #

• 可以给TemplatesComponent添加display: none的样式，避免可能的布局影响
• 用switch替代多个if-else，让条件判断更清晰

内容的提问来源于stack exchange，提问作者PVG