Angular运行时动态分配*ngIf结构指令实现方案咨询

嘿，你这个需求完全可行！不过直接给模板动态加*ngIf确实不能像加普通属性那样操作，得借助Angular的ViewContainerRef和TemplateRef来实现，这也是官方推荐的标准路子。下面给你拆解清楚：

*ngIf本质上就是Angular帮我们封装了「根据条件创建/销毁模板内容」的逻辑，所以我们可以手动用这两个API还原这个行为：

• TemplateRef：用来获取你想要动态控制显示的模板片段
• ViewContainerRef：用来管理模板内容的插入、移除（也就是模拟*ngIf的显示/隐藏）

举个贴合你场景的简单例子（假设要根据用户输入控制内容显示）：

import { Component, ViewChild, ViewContainerRef, TemplateRef, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs';

@Component({
  selector: 'app-dynamic-ctrl',
  template: `
    <div>
      <input type="text" [formControl]="userInput" placeholder="输入内容控制显示">
      <!-- 用#dynamicTpl标记要控制的模板 -->
      <ng-template #dynamicTpl>
        <p>这是跟随用户输入动态显示的内容</p>
      </ng-template>
    </div>
  `
})
export class DynamicControlComponent implements OnInit {
  @ViewChild('dynamicTpl', { read: TemplateRef }) dynamicTpl!: TemplateRef<any>;
  @ViewChild('dynamicTpl', { read: ViewContainerRef }) viewContainer!: ViewContainerRef;
  userInput = new FormControl('');

  ngOnInit() {
    // 监听用户输入变化，控制模板显示
    this.userInput.valueChanges.pipe(debounceTime(200)).subscribe(value => {
      if (value?.trim()) {
        // 条件满足时插入模板
        this.viewContainer.createEmbeddedView(this.dynamicTpl);
      } else {
        // 条件不满足时销毁模板内容
        this.viewContainer.clear();
      }
    });
  }
}

如果你的场景不需要完全在运行时动态挂载指令，只是想根据用户输入或运行时条件控制显示，优先考虑下面两种更简洁的方式：

• 直接绑定*ngIf到动态变量
  这是最常规的写法，只要在组件里定义一个控制变量，直接在模板里绑定就行，比如：

  <div>
    <input type="text" [(ngModel)]="userProvidedValue">
    <p *ngIf="userProvidedValue.trim()">根据输入显示的内容</p>
  </div>
  

  这种方式比手动操作ViewContainerRef简洁太多，能这么写就别搞复杂的。

• 自定义复用型结构指令
  如果你的控制逻辑需要在多个组件复用，可以封装自己的结构指令，内部还是用Angular的结构指令API实现：

  import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  
  @Directive({
    selector: '[appDynamicIf]'
  })
  export class DynamicIfDirective {
    constructor(
      private templateRef: TemplateRef<any>,
      private viewContainer: ViewContainerRef
    ) {}
  
    @Input() set appDynamicIf(condition: boolean) {
      condition 
        ? this.viewContainer.createEmbeddedView(this.templateRef)
        : this.viewContainer.clear();
    }
  }
  

  然后在模板里像用*ngIf一样用：

  <p *appDynamicIf="userProvidedValue.trim()">自定义指令控制的内容</p>
  

因为*ngIf是结构指令，它不是普通的DOM属性——Angular在编译阶段就会把*ngIf语法糖转换成<ng-template>和对应的ViewContainer操作，运行时直接给DOM加*ngIf属性，Angular完全不会识别，所以必须通过ViewContainerRef和TemplateRef来操作。

总结一下：

• 需求完全可行，ViewContainerRef + TemplateRef是标准实现方式
• 能直接用模板绑定*ngIf就优先用，这是最简便的方案
• 复杂复用场景可以自定义结构指令

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