Angular中带选择器的ng-content条件重复模板引用问题

嘿，我完全懂你碰到的麻烦——用*ngIf配合带select的ng-content切换移动端和桌面端模板时，大概率会遇到模板引用变量重复绑定或者投影内容状态丢失的问题，对吧？这是因为Angular的ng-content属于静态内容投影机制，同一个投影内容只能被投影一次，再加上*ngIf的切换会销毁重建对应DOM节点，连带把投影的组件/内容也给销毁了，自然就会引发各种奇怪的问题。

先看看你的原始代码里的核心问题点：

import {Component} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({
  selector: 'ui-switcher',
  template: `
    <ng-content *ngIf="isSmall" select="mobile"></ng-content>
    <ng-content *ngIf="!isSmall" select="web"></ng-content>
  `
})
export class UiSwitcherComponent {
  public isSmall: boolean;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe(Breakpoints.Handset)
      .subscribe(result => {
        this.isSmall = result.matches;
      });
  }
}

正确解决方案：用ng-template + ng-container实现动态渲染 #

我们可以把父组件传递的移动端/桌面端内容放到ng-template中，然后在ui-switcher组件里根据条件动态渲染这些模板，这样既不会有重复投影的问题，还能保留内容的状态，模板引用变量也能正常工作。

步骤1：改造ui-switcher组件

import {Component, ContentChild, TemplateRef} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({
  selector: 'ui-switcher',
  template: `
    <ng-container *ngTemplateOutlet="isSmall ? mobileTemplate : webTemplate"></ng-container>
  `
})
export class UiSwitcherComponent {
  public isSmall: boolean;

  // 通过ContentChild获取父组件传递的模板实例
  @ContentChild('mobile', {static: false}) mobileTemplate!: TemplateRef<any>;
  @ContentChild('web', {static: false}) webTemplate!: TemplateRef<any>;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe(Breakpoints.Handset)
      .subscribe(result => {
        this.isSmall = result.matches;
      });
  }
}

步骤2：父组件中用模板传递内容

<ui-switcher>
  <!-- 用ng-template包裹移动端内容，指定模板引用变量 -->
  <ng-template #mobile>
    <div class="mobile-content">
      <button #mobileActionBtn>移动端操作按钮</button>
      <!-- 这里的#mobileActionBtn可以在父组件中正常访问，不会出现重复绑定问题 -->
    </div>
  </ng-template>

  <!-- 用ng-template包裹桌面端内容 -->
  <ng-template #web>
    <div class="web-content">
      <button #webActionBtn>桌面端操作按钮</button>
    </div>
  </ng-template>
</ui-switcher>

为什么这个方案能解决问题？ #

• 动态渲染替代静态投影：ngTemplateOutlet是动态渲染模板，不会像ng-content那样一次性完成投影，而是根据条件切换渲染不同模板，避免了内容被重复销毁重建的问题。
• 模板引用变量正常工作：父组件中的模板引用变量（比如#mobileActionBtn）属于父组件的模板上下文，不会因为子组件的条件切换出现重复绑定或无法访问的情况。
• 保留组件状态：如果投影的内容是Angular组件，用ng-template渲染时，组件实例只会在第一次渲染时创建，切换时不会销毁重建（除非手动处理），能完整保留组件的状态。

额外优化：保留select风格的写法 #

如果你更习惯原来的select选择器思路，也可以给ng-template加自定义属性，再通过@ContentChild按属性选择：

<!-- 父组件写法 -->
<ui-switcher>
  <ng-template mobile>...</ng-template>
  <ng-template web>...</ng-template>
</ui-switcher>

// 子组件修改选择逻辑
@ContentChild(TemplateRef, {descendants: true, selector: '[mobile]'}) mobileTemplate!: TemplateRef<any>;
@ContentChild(TemplateRef, {descendants: true, selector: '[web]'}) webTemplate!: TemplateRef<any>;

这样写法更贴近你最初的思路，同样能解决问题。

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