概述
本篇文章带大家了解一下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. 投影子元素
容器组件这样写
<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-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来包裹我们的实际元素。
<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组件学习之浅析内容投影的全部内容，希望文章能够帮你解决Angular组件学习之浅析内容投影所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复