Great question! The issue here is that the templateUrl in the @Component decorator is resolved before your component class is instantiated, so modifying it in ngOnInit won't have any effect—by that point, the template has already been loaded. Let's walk through two solid solutions to fix this:

解决方案1：使用templateUrl工厂函数（适合初始加载时切换） #

Angular allows templateUrl to be a factory function that returns the template path. We can use this to fetch the route parameter before the component is initialized, using Angular's inject() function to access the ActivatedRoute synchronously.

修改后的组件代码： #

import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-test',
  // 使用工厂函数动态返回模板路径
  templateUrl: () => {
    const route = inject(ActivatedRoute);
    // 注意：如果是查询参数（如 /test?a=Test1.html），改用 queryParamMap
    const templateName = route.snapshot.paramMap.get('a') || 'test.component.html';
    // 确保路径正确，根据你的文件结构调整
    return `./${templateName}`;
  },
  styleUrls: ['./test.component.css']
})
export class HtmlTablesInputComponent implements OnInit {
  public a: string;
  // 注入ActivatedRoute供ngOnInit使用
  private route = inject(ActivatedRoute);

  ngOnInit() {
    // 同样注意paramMap和queryParamMap的区别
    this.a = this.route.snapshot.paramMap.get('a');
  }
}

注意事项： #

• This works for the initial component load, but if the route parameter changes without reloading the component (e.g., navigating from /test/a=Test1.html to /test/a=Test2.html), the factory function won't re-run—since the component is already initialized.
• Ensure all specified template files exist in the correct directory, otherwise Angular will throw a template not found error.
• If you're using query parameters instead of path parameters, replace paramMap with queryParamMap everywhere.

解决方案2：动态模板切换（支持参数变化后更新） #

If you need to switch templates after the component has loaded (when the route parameter changes), use ngTemplateOutlet to dynamically display different pre-defined templates, or load components dynamically.

步骤1：修改主模板（test.component.html） #

Add all possible templates as <ng-template> references:

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

<!-- 默认模板 -->
<ng-template #defaultTemplate>
  <p>This is the default template (test.component.html)</p>
</ng-template>

<!-- Test1模板 -->
<ng-template #test1Template>
  <p>This is the Test1.html template content</p>
  <!-- 你可以在这里复制Test1.html的内容，或者用动态组件加载外部模板 -->
</ng-template>

步骤2：更新组件类 #

Listen for route parameter changes and switch the active template:

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class HtmlTablesInputComponent implements OnInit {
  // 获取模板引用
  @ViewChild('defaultTemplate') defaultTemplate!: TemplateRef<any>;
  @ViewChild('test1Template') test1Template!: TemplateRef<any>;
  // 当前激活的模板
  currentTemplate!: TemplateRef<any>;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 监听路由参数变化（支持路径参数或查询参数）
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        const templateName = params.get('a');
        // 根据参数切换模板
        switch(templateName) {
          case 'Test1.html':
            this.currentTemplate = this.test1Template;
            break;
          // 可以添加更多模板分支
          default:
            this.currentTemplate = this.defaultTemplate;
            break;
        }
        return [templateName];
      })
    ).subscribe();
  }
}

扩展说明： #

• If your templates are large or need to be separate files, you can convert them into standalone components and use ViewContainerRef to dynamically load them instead of using <ng-template>.
• This approach handles route parameter changes without reloading the component, making it ideal for single-page navigation.

内容的提问来源于stack exchange，提问作者Sergio Vivas Pleite