angular内容投影详解

极客

　　这篇文章主要为大家介绍了angular内容投影，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助


单内容投影
　　利用ng-content来实现

2. ‹!-- 组件 - app-content-single -->
3. ‹div>
4.   ‹h2>标题‹/h2>
5.   ‹!-- 投影内容显示位置 -->
6.   ‹ng-content>‹/ng-content>
7. ‹/div>
8. ‹!-- 使用 -->
9. ‹app-content-single>
10.   ‹div>this is content‹/div>
11. ‹/app-content-single>

复制代码

多内容投影
　　利用ng-content来实现

2. ‹!-- 组件 - app-content-more -->
3. ‹div>
4.   ‹h3>Herder Title‹/h3>
5.   ‹ng-content select=".header">‹/ng-content>
6.   ‹h3>Body Title‹/h3>
7.   ‹ng-content select="[body]">‹/ng-content>
8.   ‹h3>Default Title‹/h3>
9.   ‹ng-content>‹/ng-content>
10.   ‹h3>Footer Title‹/h3>
11.   ‹ng-content select="footer">‹/ng-content>
12. ‹/div>
13. ‹!-- 使用 -->
14. ‹app-content-more>
15.   ‹div>this is default01‹/div>
16.   ‹div class="header">this is header‹/div>
17.   ‹div>this is default02‹/div>
18.   ‹div body>this is body‹/div>
19.   ‹div>this is default03‹/div>
20.   ‹footer>this is footer‹/footer>
21.   ‹div>this is default04‹/div>
22. ‹/app-content-more>

复制代码

　　有条件的内容投影-ng-template, ng-container, directive 等来配合实现

单个条件的内容投影
　　eg: 假设现在有一个人员列表，当某个人的money大于200的时候，额外添加组件中模板定义的内容
　　定义一个 appChildRef 指令来配合 ng-template 获取模板

2. import { Directive, TemplateRef } from '@angular/core';
3. @Directive({
4.   selector: '[appChildRef]'
5. })
6. export class ChildRefDirective {
7.   constructor(public templateRef: TemplateRef‹any>) { }
8. }

复制代码

app-persons - html

2. ‹div class="list-item" *ngFor="let person of persons;">
3.   ‹div>Name: {{ person.name }}‹/div>
4.   ‹div>Money: {{ person.money }}‹/div>
5.   ‹div *ngIf="person.money > 200">
6.     ‹ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef">‹/ng-container>
7.   ‹/div>
8. ‹/div>

复制代码

app-persons - ts

2. import { Component, ContentChild, OnInit } from '@angular/core';
3. import { ChildRefDirective } from '../../../../directives/child-ref.directive';
4. @Component({
5.   selector: 'app-persons',
6.   templateUrl: './persons.component.html',
7.   styleUrls: ['./persons.component.scss']
8. })
9. export class PersonsComponent implements OnInit {
10.   persons: { name: string; money: number; }[] = [
11.     { name: '杰克', money: 120 },
12.     { name: '李莉', money: 210 },
13.     { name: '张三', money: 170 },
14.   ];
15.   @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective;
16.   constructor() { }
17.   ngOnInit(): void { }
18. }

复制代码

使用

2. ‹app-persons>
3.   ‹ng-template appChildRef>
4.     ‹div>this is child ref content‹/div>
5.   ‹/ng-template>
6. ‹/app-persons>

复制代码

效果图

多个条件内容投影
　　eg: 现在希望通过 persons 数据中的字段进行绑定内嵌的模板来显示

appChildRef 调整

2. import { Directive, Input, TemplateRef } from '@angular/core';
3. @Directive({
4.   selector: '[appChildRef]'
5. })
6. export class ChildRefDirective {
7.   // 接受定义模板名称-通过这个名称和 persons 中的render字段对应进行显示对应的模板内容
8.   @Input() appChildRef!: string;
9.   constructor(public templateRef: TemplateRef‹any>) { }
10. }

复制代码

app-persons - html

2. ‹div class="list-item" *ngFor="let person of persons;let i=index;">
3.   ‹div>Name: {{ person.name }}‹/div>
4.   ‹div>Money: {{ person.money }}‹/div>
5.   ‹!-- ‹div *ngIf="person.money > 200">
6.     ‹ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef">‹/ng-container>
7.   ‹/div> -->
8.   ‹div *ngIf="person.render && tempRefs[person.render]">
9.     ‹!-- 配合 ngTemplateOutlet 指令给template传递当前person的数据 -->
10.     ‹ng-container *ngTemplateOutlet="tempRefs[person.render].templateRef; context: { $implicit: person, i: i }">‹/ng-container>
11.   ‹/div>
12. ‹/div>

复制代码

app-persons - ts

2. import { Component, ContentChild, ContentChildren, OnInit, QueryList } from '@angular/core';
3. import { ChildRefDirective } from '../../../../directives/child-ref.directive';
4. @Component({
5.   selector: 'app-form-unit',
6.   templateUrl: './form-unit.component.html',
7.   styleUrls: ['./form-unit.component.scss']
8. })
9. export class FormUnitComponent implements OnInit {
10.   persons: { name: string; money: number; render?: string; }[] = [
11.     { name: '杰克', money: 120, render: 'temp1' },
12.     { name: '李莉', money: 210, render: 'temp2' },
13.     { name: '张三', money: 170, render: 'temp3' },
14.   ];
15.   // @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective;
16.   @ContentChildren(ChildRefDirective) childrenRef!: QueryList‹ChildRefDirective>;
17.   get tempRefs() {
18.     const aObj: any = {};
19.     this.childrenRef.forEach(template => {
20.       const key: string = template.appChildRef;
21.       aObj[key] = template;
22.     })
23.     return aObj;
24.   }
25.   constructor() { }
26.   ngOnInit(): void { }
27. }

复制代码

使用

2. ‹app-persons>
3.   ‹ng-template appChildRef="temp1" let-person let-index="i">
4.     ‹div>{{index}}-{{person.name}}: this is temp1‹/div>
5.   ‹/ng-template>
6.   ‹ng-template appChildRef="temp2" let-person let-index="i">
7.     ‹div>{{index}}-{{person.name}}: this is temp2‹/div>
8.   ‹/ng-template>
9.   ‹ng-template appChildRef="temp3" let-person let-index="i">
10.     ‹div>{{index}}-{{person.name}}: this is temp3‹/div>
11.   ‹/ng-template>
12. ‹/app-persons>

复制代码

效果图

总结

　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

---