Angular多层内容投影中GenericFeatureContainer的ContentChild无法获取FeatureConsumer实例的问题

我明白你遇到的问题了——在多层内容投影的场景下，GenericFeatureContainer通过ContentChild拿不到FeatureConsumer实例，而SpecificFeatureContainer却可以，这确实挺让人困惑的。让我帮你分析下原因，然后给出解决方案。

问题根源 #

1. ContentChild的查找范围限制：ContentChild默认只会查找当前组件模板直接声明的子元素，而通过ng-content投影进来的内容，本质上属于父组件（这里是SpecificFeatureContainer）的内容，并不是GenericFeatureContainer的直接子节点，所以它无法直接通过ContentChild(FeatureConsumerComponent)找到实例。
2. 令牌不匹配：你在FeatureConsumerComponent中注册了以抽象类FeatureConsumer为令牌的提供者，但GenericFeatureContainer却在查找具体的FeatureConsumerComponent类，两者不匹配，这也会导致查找失败。

解决方案 #

我们需要调整两个关键点：一是利用抽象类令牌通过依赖注入跨层级获取实例，二是修正投影模板的结构，避免干扰实例的查找。

修改后的完整代码

import { Component, contentChild, forwardRef } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

abstract class FeatureConsumer {
  featureName = 'Business';
}

@Component({
  selector: 'feature-consumer',
  providers: [{ 
    provide: FeatureConsumer, 
    useExisting: forwardRef(() => FeatureConsumerComponent) 
  }],
  template: `
    <div>
      The {{ this.featureName }} feature is being rendered!
    </div>
  `
})
export class FeatureConsumerComponent extends FeatureConsumer {}

@Component({
  selector: 'generic-feature-container',
  template: `
    <div>
      generic feature container has a feature consumer? {{ !!featureConsumer() }} 
      {{ featureConsumer()?.featureName }}
    </div>
    <ng-content></ng-content>
  `
})
export class GenericFeatureContainer {
  // 修改：通过抽象类FeatureConsumer令牌查找实例
  featureConsumer = contentChild(FeatureConsumer);
}

@Component({
  selector: 'specific-feature-container',
  imports: [GenericFeatureContainer],
  template: `
    <div>
      specific feature container has a feature consumer? {{ !!featureConsumer() }} 
      {{ featureConsumer()?.featureName }}
    </div>
    <generic-feature-container>
      <!-- 修改：去掉多余的ng-container，直接投影内容 -->
      <ng-content></ng-content>
    </generic-feature-container>
  `,
})
export class SpecificFeatureContainer {
  // 同样通过抽象类令牌查找
  featureConsumer = contentChild(FeatureConsumer);
}

@Component({
  selector: 'concrete-consumer',
  imports: [SpecificFeatureContainer, FeatureConsumerComponent],
  template: `
    <specific-feature-container>
      <feature-consumer/>
    </specific-feature-container>
  `,
})
export class ConcreteConsumer {}

@Component({
  selector: 'app-root',
  imports: [ConcreteConsumer],
  template: `
    <concrete-consumer/>
  `,
})
export class Playground {}

bootstrapApplication(Playground);

关键修改说明

1. GenericFeatureContainer的ContentChild目标：把contentChild(FeatureConsumerComponent)改成contentChild(FeatureConsumer)，这样就会通过你注册的抽象类令牌去查找实例，而不是具体组件类，利用Angular的DI体系可以穿透投影层级找到提供者。
2. 简化SpecificFeatureContainer的投影结构：去掉了包裹ng-content的<ng-container feature-consumer>，这个多余的容器会让投影内容的层级变复杂，导致GenericFeatureContainer无法正确识别到FeatureConsumer实例。直接把ng-content放在generic-feature-container内部即可，保持投影内容的直接性。
3. SpecificFeatureContainer的ContentChild同步修改：同样改成通过抽象类令牌查找，保持逻辑一致性。

这样修改后，GenericFeatureContainer就能正确获取到FeatureConsumer的实例，页面上会显示出对应的featureName，同时DOM结构也保持正确。

内容来源于stack exchange