如何使用Angular组件实现内容投影

这篇文章给大家介绍如何使用Angular组件实现内容投影，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联是一家集网站建设,曹妃甸企业网站建设,曹妃甸品牌网站建设,网站定制,曹妃甸网站建设报价,网络营销,网络优化,曹妃甸网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

1. 投影一块内容

容器组件这样写


  编号1

业务组件这样用


	未指定投影位置的内容会被投影到无select属性的区域

2. 投影多块内容/组件

容器组件这样写

使用标签锁定投影位置
使用class锁定投影位置
用自定义组件名称锁定投影位置
使用自定义属性锁定投影位置


  编号2

业务组件这样用


  使用标签锁定投影位置
  使用class锁定投影位置

使用自定义组件名称锁定投影位置

使用自定义属性锁定投影位置

演示

如何使用Angular组件实现内容投影

3. 投影子元素

使用ng-container来包裹子元素,减少不必要的dom层,类似vue中的template

容器组件这样写


  编号4

业务组件这样写


  
    内容投影酷吗?
    内容投影酷吗?
    内容投影酷吗?
    内容投影酷吗?

4. 有条件的内容投影

中文网的描述:
如果你的组件需要_有条件地_渲染内容或多次渲染内容，则应配置该组件以接受一个 ng-template 元素，其中包含要有条件渲染的内容。
在这种情况下，不建议使用 ng-content 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部，该内容也总会被初始化。
使用 ng-template 元素，你可以让组件根据你想要的任何条件显式渲染内容，并可以进行多次渲染。在显式渲染 ng-template 元素之前，Angular 不会初始化该元素的内容。

使用ng-container定义我们的投影区块

使用ngTemplateOutlet指令来渲染ng-template元素。
通过内置的动态指令*ngIf来控制是否渲染投影。


  编号3

在业务组件中我们使用ng-template来包裹我们的实际元素。

my-hello组件只在ngOnInit()做日志输出来观察打印情况。


  
    切换

import { Directive, TemplateRef } from '@angular/core'; @Directive({ selector: '[appContent]', }) export class ContentDirective { constructor(public templateRef: TemplateRef) {} }

@Directive({ selector: '[appToggle]', }) export class ToggleDirective { @HostListener('click') toggle() { this.app.expanded = !this.app.expanded; } constructor(public app: PageContainerComponent) {} }

重庆分公司，新征程启航

如何使用Angular组件实现内容投影

1. 投影一块内容

2. 投影多块内容/组件

使用标签锁定投影位置

3. 投影子元素

4. 有条件的内容投影

5. @ContentChild & @ContentChildren

6. @ViewChild & @ViewChildren

其他资讯