基于ngTemplateOutlet动态值：避免为电子书每页模板添加@ViewChild

Great question! Dealing with dozens of @ViewChild declarations for your ebook page templates is a total pain—here are two clean, scalable ways to solve this:

Method 1: Use a Custom Directive (Most Maintainable) #

This is the Angular-native approach, and it keeps your template and component code organized even with hundreds of pages.

Step 1: Create a Page Template Directive #

First, make a simple directive to tag your page templates and capture their names:

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({
  selector: '[pageTemplate]'
})
export class PageTemplateDirective {
  // Pass the page name (e.g., "page6") via this input
  @Input() pageTemplate!: string;

  constructor(public templateRef: TemplateRef<any>) {}
}

Step 2: Update Your Templates #

Add the directive to each of your page templates and define their unique names:

<ng-template pageTemplate="page1">
  <!-- Page 1 content here -->
</ng-template>

<ng-template pageTemplate="page6">
  <!-- Page 6 content here -->
</ng-template>

<ng-template pageTemplate="page7">
  <!-- Page 7 content here -->
</ng-template>

Step 3: Map Templates in Your Component #

Use @ViewChildren to grab all instances of your directive, then build a lookup object for easy access:

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { PageTemplateDirective } from './page-template.directive';

@Component({
  selector: 'app-ebook',
  templateUrl: './ebook.component.html'
})
export class EbookComponent implements AfterViewInit {
  @ViewChildren(PageTemplateDirective) pageDirectives!: QueryList<PageTemplateDirective>;
  pageTemplates: { [key: string]: TemplateRef<any> } = {};
  
  // Track the current page to display (update this when navigating)
  currentPage = 'page6';

  ngAfterViewInit() {
    // Build the template lookup map
    this.pageDirectives.forEach(dir => {
      this.pageTemplates[dir.pageTemplate] = dir.templateRef;
    });
  }
}

Step 4: Render the Dynamic Template #

Use ngTemplateOutlet with your lookup object and dynamic page name:

<!-- This will render the template matching currentPage -->
<ng-container [ngTemplateOutlet]="pageTemplates[currentPage]"></ng-container>

Method 2: Use @ViewChildren with Attribute Markers (Quick Fix) #

If you don't want to create a new directive, you can use native HTML attributes to tag templates:

Step 1: Add Attributes to Templates #

<ng-template #page1 data-page-name="page1">
  <!-- Page 1 content -->
</ng-template>

<ng-template #page6 data-page-name="page6">
  <!-- Page 6 content -->
</ng-template>

Step 2: Map Templates in Component #

import { Component, ViewChildren, QueryList, AfterViewInit, TemplateRef, ElementRef } from '@angular/core';

@Component({
  selector: 'app-ebook',
  templateUrl: './ebook.component.html'
})
export class EbookComponent implements AfterViewInit {
  @ViewChildren(TemplateRef) allTemplates!: QueryList<TemplateRef<any>>;
  pageTemplates: { [key: string]: TemplateRef<any> } = {};
  currentPage = 'page7';

  ngAfterViewInit() {
    this.allTemplates.forEach(template => {
      const pageName = (template.elementRef as ElementRef).nativeElement.getAttribute('data-page-name');
      if (pageName) {
        this.pageTemplates[pageName] = template;
      }
    });
  }
}

Step 3: Render the Template #

Same as Method 1—use ngTemplateOutlet with the dynamic page name:

<ng-container [ngTemplateOutlet]="pageTemplates[currentPage]"></ng-container>

Key Notes #

• Always use ngAfterViewInit to build your template map—this ensures all templates are loaded before you try to access them.
• When navigating pages, just update the currentPage property (e.g., this.currentPage = 'page8') and Angular will automatically switch the rendered template.

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