抠丁客 抠丁客
项目
编辑 (2025/12/24)

Angular内容投影

您可以使用@abp/ng.core包中的ContentProjectionService，以简单明确的方式进行内容投影。

开始使用

您无需在模块或组件级别提供ContentProjectionService，因为它已在根级别提供。您可以直接在组件、指令或服务中注入并立即使用它。

import { ContentProjectionService } from '@abp/ng.core';
import { inject } from '@angular/core';

@Component({
  /* 类元数据 */
})
class DemoComponent {
  private contentProjectionService = inject(ContentProjectionService);
}

使用方法

您可以使用ContentProjectionService的projectContent方法在项目中动态渲染组件和模板。

如何将组件投影到根级别

如果将RootComponentProjectionStrategy作为projectContent方法的第一个参数传递，ContentProjectionService将解析投影组件并将其放置在根级别。如果提供了上下文，它还会将上下文传递给组件。

const strategy = PROJECTION_STRATEGY.AppendComponentToBody(
  SomeOverlayComponent,
  { someOverlayProp: "SOME_VALUE" }
);

const componentRef = this.contentProjectionService.projectContent(strategy);

在上面的示例中，SomeOverlayComponent组件将被放置在<body>的末尾，并返回一个ComponentRef。此外，将应用给定的上下文，因此组件的someOverlayProp属性将被设置为SOME_VALUE。

您应该保留返回的ComponentRef实例，因为它是对投影组件的引用，您需要该引用来销毁投影视图和组件实例。

如何将组件和模板投影到容器中

如果将ComponentProjectionStrategy或TemplateProjectionStrategy作为projectContent方法的第一个参数传递，并将ViewContainerRef作为该策略的第二个参数传递，ContentProjectionService将把组件或模板投影到给定容器中。如果提供了上下文，它还会将上下文传递给组件或模板。

const strategy = PROJECTION_STRATEGY.ProjectComponentToContainer(
  SomeComponent,
  viewContainerRefOfTarget,
  { someProp: "SOME_VALUE" }
);

const componentRef = this.contentProjectionService.projectContent(strategy);

在此示例中，viewContainerRefOfTarget（一个ViewContainerRef实例）将被清空，SomeComponent组件将被放置在其中。此外，将应用给定的上下文，组件的someProp属性将被设置为SOME_VALUE。

您应该保留返回的ComponentRef或EmbeddedViewRef，因为它们是对投影内容的引用，您需要在必要时销毁它们。

请参阅ProjectionStrategy了解所有可用的投影策略以及如何构建自己的投影策略。

API

projectContent

projectContent<T extends Type<any> | TemplateRef<any>>(
    projectionStrategy: ProjectionStrategy<T>,
    injector = this.injector,
): ComponentRef<C> | EmbeddedViewRef<C>
  • projectionStrategy参数是此处的主要焦点，上文已做说明。
  • injector参数是您可以传递给投影内容的Injector实例。在TemplateProjectionStrategy中不使用此参数。
在本文档中