我是靠谱客的博主 含蓄乌冬面,这篇文章主要介绍一文了解angular中的3种内容投影(单插槽、多插槽、有条件),现在分享给大家,希望可以做个参考。

本篇文章带大家了解下angular中的内容投影,介绍一下单插槽内容投影、多插槽内容投影、有条件的内容投影,希望对大家有所帮助!

【相关教程推荐:《angular教程》】

单插槽内容投影

zippy-basic.component.ts

复制代码
1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core'; @Component({ selector: 'app-zippy-basic', template: ` <h2>单插槽内容投影</h2> <ng-content></ng-content> ` }) export class ZippyBasicComponent {}
登录后复制

有了 ng-content 元素,该组件的用户现在可以将自己的消息投影到该组件中。例如:

app.component.html

复制代码
1
2
3
4
<!-- 将 app-zippy-basic 元素包裹的全部内容投影到 zippy-basic 组件中去 --> <app-zippy-basic> <p>单插槽内容投影:投影数据</p> </app-zippy-basic>
登录后复制

效果如下:
在这里插入图片描述

多插槽内容投影

zippy-multislot.component.ts

复制代码
1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core'; @Component({ selector: 'app-zippy-multislot', template: ` <h2>多插槽内容投影</h2> <ng-content></ng-content> <ng-content select="[question]"></ng-content> ` }) export class ZippyMultislotComponent {}
登录后复制

app.component.html

复制代码
1
2
3
4
5
6
7
8
<!-- 使用 question 属性的内容将投影到带有 `select=[question]` 属性的 ng-content 元素。 --> <app-zippy-multislot> <p question style="color: hotpink;"> 带question属性的p元素 </p> <p style="color: lightgreen">不带question属性的p元素-->匹配到不带select属性的ng-content</p> <p>不带question属性的p元素-->匹配到不带select属性的ng-content</p> </app-zippy-multislot>
登录后复制

效果如下:
在这里插入图片描述

有条件的内容投影

复制代码
1
2
3
<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container> <!-- 等同 --> <ng-container [ngTemplateOutlet]="templateRefExp" [ngTemplateOutletContext]="contextExp"></ng-container>
登录后复制
参数类型说明
templateRefExpTemplateRef | null一个字符串,用于定义模板引用以及模板的上下文对象
contextExpObject | null是一个对象,该对象的键名将可以在局部模板中使用 let 声明中进行绑定。在上下文对象中使用 $implicit 为键名时,将把它作为默认值。

ng-template 标签的#ID会匹配templateRefExp,将ng-template标签的内容嵌入到指定的ngTemplateOutlet中。

例一:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<header>头部</header> <main> <h3>内容:</h3> <ng-container [ngTemplateOutlet]="greet"></ng-container> </main> <footer>底部</footer> <ng-template #greet> <div> <h4>hi!</h4> <h4>hello my dear friend!</h4> </div> </ng-template>
登录后复制

效果:

在这里插入图片描述

ViewChild和ContentChild

  • ContentChild:与内容子节点有关,操作投影进来的内容;
  • ViewChild:与视图子节点有关,操作自身的视图内容;

ContentChild

在上一部分,我们通过内容投影,让自定义的组件标签能够嵌入html标签或自定义组件标签,那么它如何操作投影进来的内容呢?

首先创建两个组件

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**** part-b.component.ts ****/ import { Component, OnInit,Output} from '@angular/core'; @Component({ selector: 'app-content-part-b', templateUrl: './part-b.component.html', styleUrls: ['./part-b.component.scss'] }) export class PartBComponent implements OnInit { constructor() { } ngOnInit() { } public func():void{ console.log("PartB"); } }
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**** part-a.component.ts ****/ import { Component, OnInit, ContentChild } from '@angular/core'; // 1、引入 part-b 组件 import { PartBComponent } from '../part-b/part-b.component'; @Component({ selector: 'app-content-part-a', templateUrl: './part-a.component.html', styleUrls: ['./part-a.component.scss'] }) export class PartAComponent implements OnInit { // 2、获取投影 @ContentChild(PartBComponent) PartB:PartBComponent constructor() { } ngOnInit() {} ngAfterContentInit(): void { // 3、调用 part-b 组件的 func() 方法 this.PartB.func(); } public func() { console.log('PartA') } }
登录后复制

part-b组件的内容投影到part-a组件中

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
<!-- content.component.html --> <div> <div>Content</div> <div> <app-content-part-a> <!-- 投影在part-a组件中的内容 --> <h1>PartA--start</h1> <app-content-part-b></app-content-part-b> <span>PartA--end</span> </app-content-part-a> </div> </div>
登录后复制

ViewChild

上一部分的ContentChild操作的时投影进来的内容,而ViewChild操作的是自身的视图内容
给上一部分的content.component.html修改如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
<!-- content.component.html --> <div> <div>Content</div> <div> <!-- 在此处引用模板变量 #partA --> <app-content-part-a #partA> <h1>PartA--start</h1> <app-content-part-b></app-content-part-b> <span>PartA--end</span> </app-content-part-a> </div> </div>
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**** content.component.ts ****/ import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-content', templateUrl: './content.component.html', styleUrls: ['./content.component.scss'] }) export class ContentComponent implements OnInit { // 2、获取视图 partA @ViewChild('partA') partA: any; constructor() { } ngOnInit() {} ngAfterViewInit(): void { // 3、调用 part-a 组件的 func() 方法 this.partA.func(); } }
登录后复制

ContentChildViewChild还存在复数的形式,即ContentChildrenViewChildren,它们取到的是节点的一个集合,其他的没有什么区别

写法如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit, ContentChild,ContentChildren ,QueryList } from '@angular/core'; import { PartBComponent } from '../part-b/part-b.component'; @Component({ selector: 'app-content-part-a', templateUrl: './part-a.component.html', styleUrls: ['./part-a.component.scss'] }) export class PartAComponent implements OnInit { @ContentChildren(PartBComponent) PartBs: QueryList<PartBComponent>; constructor() { } ngOnInit() {} }
登录后复制

最后

以上就是含蓄乌冬面最近收集整理的关于一文了解angular中的3种内容投影(单插槽、多插槽、有条件)的全部内容,更多相关一文了解angular中内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(149)

评论列表共有 0 条评论

立即
投稿
返回
顶部