Angular可复用组件复用失败：现有代码存在哪些缺失？

你的代码核心问题是混淆了组件类和**模板引用（TemplateRef）**的概念，同时没有正确暴露可复用组件内部的模板，导致无法正常传递和渲染。以下是具体修正步骤和两种常见的复用实现方式：

错误点梳理 #

• parent组件传递的是ReUsableContentComponent组件类，但container组件接收的是TemplateRef<any>类型，类型完全不匹配
• reusable组件内部的#reUsableContent模板是组件私有元素，外部无法直接访问，需要通过代码暴露
• 未确保所有组件在同一模块中声明，导致组件无法被识别

方式一：复用组件内部的模板（适合轻量内容复用） #

1. 修改reusable.component.ts，暴露内部模板 #

通过ViewChild获取模板引用并对外暴露：

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

@Component({
  selector: 'app-reusable',
  templateUrl: './reusable.component.html'
})
export class ReusableComponent {
  // 获取内部模板引用并暴露
  @ViewChild('reUsableContent') reUsableContent!: TemplateRef<any>;
}

2. 修改parent.component.html，获取模板并传递 #

先渲染reusable组件（可隐藏），再获取它的模板引用传给container：

<!-- 隐藏组件实例，仅获取模板 -->
<app-reusable #reusableComp style="display: none;"></app-reusable>
<app-container [reUsableContent]="reusableComp.reUsableContent"></app-container>

3. 简化parent.component.ts #

无需在ngOnInit中赋值，只需确保引入ReusableComponent：

import { Component } from '@angular/core';
import { ReusableComponent } from '../reusable/reusable.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {}

4. container组件代码保持不变 #

container.component.ts和container.component.html无需修改，类型匹配后即可正常渲染模板。

方式二：动态复用整个组件（适合复杂组件复用） #

如果你的需求是复用整个组件而非仅模板，可采用动态组件加载的方式：

1. 修改container.component.ts，添加动态组件逻辑 #

import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html'
})
export class ContainerComponent {
  // 通过setter接收组件类并动态创建
  @Input() set reUsableComponent(component: any) {
    if (component) {
      this.vcr.clear();
      const factory = this.cfr.resolveComponentFactory(component);
      this.vcr.createComponent(factory);
    }
  }

  // 获取容器视图引用
  @ViewChild('componentContainer', { read: ViewContainerRef }) vcr!: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {}
}

2. 修改container.component.html，添加组件容器 #

<div #componentContainer></div>

3. 修改parent.component.ts，传递组件类 #

import { Component } from '@angular/core';
import { ReusableComponent } from '../reusable/reusable.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 暴露组件类供模板使用
  ReusableComponent = ReusableComponent;
}

4. 修改parent.component.html，传递组件类 #

<app-container [reUsableComponent]="ReusableComponent"></app-container>

5. 模块配置（Angular 9+可省略） #

确保ReusableComponent在模块的entryComponents中声明：

@NgModule({
  declarations: [ParentComponent, ContainerComponent, ReusableComponent],
  entryComponents: [ReusableComponent],
  // 其他模块配置（imports、exports等）
})
export class YourFeatureModule {}

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