本篇文章带大家了解一下angular组件中的内容投影。内容投影和vue中的插槽很类似，在组件封装的时候非常有用，我们一起来体验一下
【相关教程推荐：《angular教程》】
1. 投影一块内容容器组件这样写
<div> 编号1 <ng-content></ng-content></div>
业务组件这样用
<app-page-container> 未指定投影位置的内容会被投影到无select属性的区域</app-page-container>
2. 投影多块内容/组件容器组件这样写
使用标签锁定投影位置
使用class锁定投影位置
用自定义组件名称锁定投影位置
使用自定义属性锁定投影位置
<div> 编号2 <ng-content select="h3"></ng-content> <ng-content select=".my-class"></ng-content> <ng-content select="app-my-hello"></ng-content> <ng-content select="[content]"></ng-content></div>
业务组件这样用
<app-page-container> <h3>使用标签锁定投影位置</h3> <div class="my-class">使用class锁定投影位置</div> <app-my-hello>使用自定义组件名称锁定投影位置</app-my-hello> <div content>使用自定义属性锁定投影位置</div></app-page-container>
演示
3. 投影子元素使用ng-container来包裹子元素,减少不必要的dom层,类似vue中的template
容器组件这样写
<div> 编号4 <ng-content select="question"></ng-content></div>
业务组件这样写
<app-page-container> <ng-container ngprojectas="question"> <p>内容投影酷吗?</p> <p>内容投影酷吗?</p> <p>内容投影酷吗?</p> <p>内容投影酷吗?</p> </ng-container></app-page-container>
4. 有条件的内容投影中文网的描述:
如果你的组件需要_有条件地_渲染内容或多次渲染内容，则应配置该组件以接受一个 ng-template 元素，其中包含要有条件渲染的内容。
在这种情况下，不建议使用 ng-content 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngif 语句的内部，该内容也总会被初始化。
使用 ng-template 元素，你可以让组件根据你想要的任何条件显式渲染内容，并可以进行多次渲染。在显式渲染 ng-template 元素之前，angular 不会初始化该元素的内容。
使用ng-container定义我们的投影区块
使用ngtemplateoutlet指令来渲染ng-template元素。
通过内置的动态指令*ngif来控制是否渲染投影。
<div> 编号3 <ng-content select="[button]"></ng-content> <p *ngif="expanded"> <ng-container [ngtemplateoutlet]="content.templateref"> </ng-container> </p></div>
在业务组件中我们使用ng-template来包裹我们的实际元素。
my-hello组件只在ngoninit()做日志输出来观察打印情况。
<app-page-container> <div button> <button apptoggle>切换</button> </div> <ng-template appcontent> <app-my-hello>有条件的内容投影~</app-my-hello> </ng-template></app-page-container>
现在你会发现页面并没有像前面那么顺利的正常渲染,因为我们的逻辑还没有串通,我们继续。创建一个指令,并在ngmodule中注册,一定要注册才能用哦~
指令需要注册哦~
import { directive, templateref } from '@angular/core';@directive({ selector: '[appcontent]',})export class contentdirective { constructor(public templateref: templateref<unknown>) {}}
我们再定义一个指令来控制组件中显示/隐藏的标识
指令需要注册哦~
@directive({ selector: '[apptoggle]',})export class toggledirective { @hostlistener('click') toggle() { this.app.expanded = !this.app.expanded; } constructor(public app: pagecontainercomponent) {}}
在我们的容器组件中申明刚才定义的内容指令,页面目前不报错咯~
export class pagecontainercomponent implements oninit { expanded: boolean = false; @contentchild(contentdirective) content!: contentdirective;}
通过日志可以看到我们在切换容器组件的expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngif虽然在页面看不到渲染的内容,但组件实实在在被初始化过了。
<div *ngif="false"> <ng-content *ngif="false" select="app-my-hello"></ng-content></div>
5. @contentchild & @contentchildren使用这两个装饰器来对被投影的组件进行操作
使用注解在业务组件中定义被投影的组件
@contentchild(helloworldcomp)hellocomp: helloworldcomp;@contentchildren(helloworldcomp)hellocomps: querylist<helloworldcomp>;
在ngaftercontentinit()钩子执行后对被投影组件进行操作
6. @viewchild & @viewchildren使用这两个装饰器来对指接子组件进行操作
使用注解在业务组件中定义子组件
@viewchild(helloworldcomp)hellocomp: helloworldcomp; @viewchildren(helloworldcomp)hellocomps querylist<helloworldcomp>;
在ngafterviewinit()钩子执行后对直接子组件进行操作
结语关于组件的使用我们就先写到这里了,文笔功底有限,加油了~
更多编程相关知识，请访问：编程入门！！
以上就是angular组件学习之浅析内容投影的详细内容。