Angular如何动态切换模板？通用树形组件模板动态化问询

完全可行！这其实是Angular里实现组件复用+逻辑与UI分离的经典方案，完美适配你这种同一树形逻辑、不同UI模板的需求。我结合你的国家/城市场景，一步步给你拆解实现思路：

这一步是关键，把所有和树形操作相关的逻辑（比如数据加载、节点展开/折叠、节点查找等）都放到Service里，完全脱离UI代码，保证逻辑的统一性和可复用性。

示例代码：

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

@Injectable({ providedIn: 'root' })
export class TreeService {
  // 模拟加载国家/城市树形数据（实际可替换为API请求）
  loadTreeData(): Promise<any[]> {
    return Promise.resolve([
      { id: 1, name: '中国', expanded: false, children: [{ id: 11, name: '北京' }, { id: 12, name: '上海' }] },
      { id: 2, name: '美国', expanded: false, children: [{ id: 21, name: '纽约' }, { id: 22, name: '洛杉矶' }] }
    ]);
  }

  // 节点展开/折叠逻辑
  toggleNodeExpansion(node: any): void {
    node.expanded = !node.expanded;
  }

  // 可以扩展更多树形操作：比如添加节点、删除节点、搜索节点等
}

这个组件作为抽象层，只处理调用TreeService加载数据、触发节点操作等逻辑，具体的UI模板通过**模板引用（TemplateRef）**让子组件传入，相当于给不同的UI模板提供一个“逻辑底座”。

示例代码：

import { Component, Input, TemplateRef, OnInit } from '@angular/core';
import { TreeService } from './tree.service';

@Component({
  selector: 'app-base-tree',
  template: `
    <div class="root">
      <!-- 循环渲染所有根节点，使用传入的自定义模板 -->
      <ng-container *ngFor="let node of treeData">
        <ng-template 
          [ngTemplateOutlet]="nodeTemplate" 
          [ngTemplateOutletContext]="{ $implicit: node, toggle: toggleNode }"
        ></ng-template>
      </ng-container>
    </div>
  `
})
export class BaseTreeComponent implements OnInit {
  treeData: any[] = [];

  // 接收子组件传入的节点模板
  @Input() nodeTemplate!: TemplateRef<any>;

  constructor(private treeService: TreeService) {}

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

  private loadTreeData(): void {
    this.treeService.loadTreeData().then(data => {
      this.treeData = data;
    });
  }

  // 暴露给模板的节点切换方法
  toggleNode(node: any): void {
    this.treeService.toggleNodeExpansion(node);
  }
}

现在针对你的两个页面需求，分别创建带自定义UI的组件，它们复用BaseTreeComponent的逻辑，只需要定义自己的模板即可：

组件1：纯文本展示的树形组件（对应第一个DOM结构） #

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

@Component({
  selector: 'app-text-tree',
  template: `
    <app-base-tree [nodeTemplate]="textNodeTemplate"></app-base-tree>

    <!-- 自定义纯文本节点模板 -->
    <ng-template #textNodeTemplate let-node let-toggle="toggle">
      <div class="parent" (click)="toggle(node)">
        {{ node.name }}
        <div class="children" *ngIf="node.expanded">
          <ng-container *ngFor="let child of node.children">
            <div class="child-item">{{ child.name }}</div>
          </ng-container>
        </div>
      </div>
    </ng-template>
  `,
  styles: [`
    .parent { padding: 8px; border: 1px solid #eee; margin: 4px 0; cursor: pointer; }
    .children { padding-left: 20px; margin-top: 4px; }
    .child-item { padding: 4px; border: 1px solid #f5f5f5; }
  `]
})
export class TextTreeComponent {}

组件2：带输入框的可编辑树形组件（对应第二个DOM结构） #

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

@Component({
  selector: 'app-editable-tree',
  template: `
    <app-base-tree [nodeTemplate]="editableNodeTemplate"></app-base-tree>

    <!-- 自定义可编辑节点模板 -->
    <ng-template #editableNodeTemplate let-node let-toggle="toggle">
      <div class="parent" (click)="toggle(node)">
        {{ node.name }}
        <div class="children" *ngIf="node.expanded">
          <ng-container *ngFor="let child of node.children">
            <div class="child-item">
              <label>{{ child.name }}:</label>
              <input type="text" placeholder="输入备注" class="child-input">
            </div>
          </ng-container>
        </div>
      </div>
    </ng-template>
  `,
  styles: [`
    .parent { padding: 8px; border: 1px solid #eee; margin: 4px 0; cursor: pointer; }
    .children { padding-left: 20px; margin-top: 4px; }
    .child-item { padding: 4px; border: 1px solid #f5f5f5; display: flex; gap: 8px; align-items: center; }
    .child-input { padding: 2px 4px; }
  `]
})
export class EditableTreeComponent {}

如果需要在同一个页面里根据条件动态切换两种树形模板，也很简单——直接在父组件里用*ngIf切换具体组件，或者通过ViewChild动态切换模板引用：

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

@Component({
  selector: 'app-tree-switcher',
  template: `
    <button (click)="switchTreeType()">切换树形类型</button>
    <app-base-tree [nodeTemplate]="currentTemplate"></app-base-tree>

    <!-- 纯文本模板 -->
    <ng-template #textTpl let-node let-toggle="toggle">
      <!-- 内容和TextTreeComponent里的模板一致 -->
    </ng-template>

    <!-- 可编辑模板 -->
    <ng-template #editableTpl let-node let-toggle="toggle">
      <!-- 内容和EditableTreeComponent里的模板一致 -->
    </ng-template>
  `
})
export class TreeSwitcherComponent {
  currentTemplate!: TemplateRef<any>;
  isTextMode = true;

  @ViewChild('textTpl') textTemplate!: TemplateRef<any>;
  @ViewChild('editableTpl') editableTemplate!: TemplateRef<any>;

  ngOnInit(): void {
    this.currentTemplate = this.textTemplate;
  }

  switchTreeType(): void {
    this.isTextMode = !this.isTextMode;
    this.currentTemplate = this.isTextMode ? this.textTemplate : this.editableTemplate;
  }
}

• 关注点彻底分离：逻辑在Service和Base组件，UI模板完全独立，不会出现一个模板里堆满*ngIf的“大杂烩”代码
• 扩展性极强：后续要新增第三种树形模板，只需要新建一个组件，复用BaseTree和TreeService即可，无需修改原有代码
• 维护成本低：每个模板的代码都集中在各自的组件里，修改某一个模板不会影响其他模板的逻辑

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