Angular 5中如何根据输入值切换单个组件的模板URL？

这是个很常见的Angular场景，我给你整理了几种实用的实现方式，你可以根据项目复杂度和需求来选择：

方案一：用*ngIf直接渲染不同子组件 #

这是最简单直观的方式，适合只有两种模板的场景。你可以把两个模板分别做成独立的组件，然后根据type值来控制显示哪一个：

步骤1：创建两个子组件 #

先分别生成基础搜索和高级搜索的组件：

ng generate component search-basic
ng generate component search-advanced

然后把Search.component.html的内容放到search-basic.component.html里，SearchAdvanced.component.html的内容放到search-advanced.component.html里。

步骤2：创建容器组件控制切换 #

新建一个容器组件（比如SearchContainerComponent），接收type输入属性，用*ngIf切换子组件：

// search-container.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-search-container',
  templateUrl: './search-container.component.html'
})
export class SearchContainerComponent {
  @Input() type: 'basic' | 'advanced' = 'basic';
}

对应的模板：

<!-- search-container.component.html -->
<app-search-basic *ngIf="type === 'basic'"></app-search-basic>
<app-search-advanced *ngIf="type === 'advanced'"></app-search-advanced>

步骤3：使用容器组件 #

在需要的地方调用这个容器组件，传入type值即可：

<app-search-container [type]="'basic'"></app-search-container>
<!-- 或者切换为高级模式 -->
<app-search-container [type]="'advanced'"></app-search-container>

优点：代码简单易懂，维护成本低，Angular会自动处理组件的创建和销毁。
缺点：如果后续要增加更多模板类型，需要不断添加*ngIf分支。

方案二：用ngTemplateOutlet加载外部模板 #

如果不想创建多个独立组件，你可以用ng-template加载外部模板文件，再通过ngTemplateOutlet来切换：

容器组件模板 #

<!-- search-container.component.html -->
<ng-container [ngTemplateOutlet]="currentTemplate"></ng-container>

<!-- 定义外部模板引用 -->
<ng-template #basicTemplate templateUrl="./search.component.html"></ng-template>
<ng-template #advancedTemplate templateUrl="./search-advanced.component.html"></ng-template>

容器组件类 #

// search-container.component.ts
import { Component, Input, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-search-container',
  templateUrl: './search-container.component.html'
})
export class SearchContainerComponent {
  @Input() set type(value: 'basic' | 'advanced') {
    this.currentTemplate = value === 'basic' ? this.basicTemplate : this.advancedTemplate;
  }

  @ViewChild('basicTemplate') basicTemplate!: TemplateRef<any>;
  @ViewChild('advancedTemplate') advancedTemplate!: TemplateRef<any>;
  currentTemplate!: TemplateRef<any>;
}

优点：不需要创建多个子组件，模板可以单独维护，适合模板内容相对独立的场景。
缺点：模板之间的逻辑复用需要额外处理，不如组件化清晰。

方案三：动态组件加载（适合多模板场景） #

如果后续可能扩展更多模板类型，动态组件加载是更灵活的选择，它可以根据类型动态创建并渲染组件：

容器组件模板 #

<!-- search-container.component.html -->
<div #searchHost></div>

容器组件类 #

// search-container.component.ts
import { Component, Input, ViewChild, ViewContainerRef, ComponentRef, SimpleChanges, OnChanges, OnInit, OnDestroy } from '@angular/core';
import { SearchBasicComponent } from './search-basic/search-basic.component';
import { SearchAdvancedComponent } from './search-advanced/search-advanced.component';

@Component({
  selector: 'app-search-container',
  templateUrl: './search-container.component.html'
})
export class SearchContainerComponent implements OnInit, OnChanges, OnDestroy {
  @Input() type: 'basic' | 'advanced' = 'basic';
  @ViewChild('searchHost', { read: ViewContainerRef }) host!: ViewContainerRef;
  private componentRef: ComponentRef<any> | null = null;

  ngOnInit(): void {
    this.loadTargetComponent();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['type']) {
      this.loadTargetComponent();
    }
  }

  private loadTargetComponent(): void {
    // 清空容器，销毁之前的组件
    this.host.clear();
    if (this.componentRef) {
      this.componentRef.destroy();
    }

    // 根据type选择要加载的组件
    const targetComponent = this.type === 'basic' ? SearchBasicComponent : SearchAdvancedComponent;
    // 创建组件并挂载到容器
    this.componentRef = this.host.createComponent(targetComponent);

    // 如果需要给子组件传递参数，可以在这里设置
    // this.componentRef.instance.someInput = 'xxx';
  }

  ngOnDestroy(): void {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

优点：扩展性极强，新增模板只需要添加对应的组件和类型判断，适合复杂场景。
缺点：代码相对复杂，需要手动管理组件的生命周期。

注意事项 #

Angular组件的templateUrl是编译时确定的，无法在运行时直接修改，所以不能直接通过修改组件的templateUrl来切换模板，上面的几种方案都是通过动态渲染不同内容来实现需求的。

内容的提问来源于stack exchange，提问作者Bayya Rajesh Yadav