# 内容投影你可以使用位于@abp/ng.core包中的 `ContentProjectionService` 简单明确的投影内容. ## 入门你不必在模块或组件级别提供 `ContentProjectionService`,因为它已经在**根中提供了**. 你可以在组件中注入并开始使用它. 为了获得更好的类型支持,你可以将迭代项目的类型传递给它. ```js import { ContentProjectionService } from '@abp/ng.core'; @Component({ /* class metadata here */ }) class DemoComponent { constructor(private contentProjectionService: ContentProjectionService) {} } ``` ## 用法你可以使用 `ContentProjectionService` 的 `projectContent` 方法在你的项目中动态的渲染组件和模板. ### 如何将组件投影到根级别如果将 `RootComponentProjectionStrategy` 做为 `projectContent` 方法的第一个参数,那么 `ContentProjectionService` 会解析投影组件并放在根级别,它还为组件传递上下文. ```js const strategy = PROJECTION_STRATEGY.AppendComponentToBody( SomeOverlayComponent, { someOverlayProp: "SOME_VALUE" } ); const componentRef = this.contentProjectionService.projectContent(strategy); ``` 在上面的示例中, `SomeOverlayComponent` 组件放置在 `` 的**末尾**并返回 `ComponentRef`. 另外将应用给定的上下文,因此组件的 `someOverlayProp` 被设置为 `SOME_VALUE`. > 你应该总是返回 `ComponentRef` 实例,因为它是对投影组件的引用,在你需要时使用该引用销毁投影视图和组件实例. ### 如何将组件和模板投影到容器中如果将 `ComponentProjectionStrategy` 或 `TemplateProjectionStrategy` 做为 `projectContent` 方法的第一个参数,并且传递 `ViewContainerRef` 做为策略的第二个参数传递. 那么 `ContentProjectionService` 把组件或模板投影到给定的容器中,它还为组件或模板传递上下文. ```js 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](./Projection-Strategy.md)查看所有可用的投影策略以及如何构建自己的投影策略. ## API ### projectContent ```js projectContent | TemplateRef>( projectionStrategy: ProjectionStrategy, injector = this.injector, ): ComponentRef | EmbeddedViewRef ``` - `projectionStrategy` 参数是此处的要点,在上面进行了说明. - `injector` 参数是 `Injector` 实例,你可以传递到投影内容. 在 `TemplateProjectionStrategy` 并没有使用到它. ## 下一步是什么? - [TrackByService](./Track-By-Service.md)