您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“angular内容投影怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“angular内容投影怎么实现”吧!
利用ng-content来实现
<!-- 组件 - app-content-single --> <div> <h3>标题</h3> <!-- 投影内容显示位置 --> <ng-content></ng-content> </div> <!-- 使用 --> <app-content-single> <div>this is content</div> </app-content-single>
利用ng-content
来实现
<!-- 组件 - app-content-more --> <div> <h4>Herder Title</h4> <ng-content select=".header"></ng-content> <h4>Body Title</h4> <ng-content select="[body]"></ng-content> <h4>Default Title</h4> <ng-content></ng-content> <h4>Footer Title</h4> <ng-content select="footer"></ng-content> </div> <!-- 使用 --> <app-content-more> <div>this is default01</div> <div class="header">this is header</div> <div>this is default02</div> <div body>this is body</div> <div>this is default03</div> <footer>this is footer</footer> <div>this is default04</div> </app-content-more>
有条件的内容投影-ng-template
, ng-container
, directive
等来配合实现
eg: 假设现在有一个人员列表,当某个人的money大于200的时候,额外添加组件中模板定义的内容
定义一个 appChildRef 指令来配合 ng-template 获取模板
import { Directive, TemplateRef } from '@angular/core'; @Directive({ selector: '[appChildRef]' }) export class ChildRefDirective { constructor(public templateRef: TemplateRef<any>) { } }
<div class="list-item" *ngFor="let person of persons;"> <div>Name: {{ person.name }}</div> <div>Money: {{ person.money }}</div> <div *ngIf="person.money > 200"> <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container> </div> </div>
import { Component, ContentChild, OnInit } from '@angular/core'; import { ChildRefDirective } from '../../../../directives/child-ref.directive'; @Component({ selector: 'app-persons', templateUrl: './persons.component.html', styleUrls: ['./persons.component.scss'] }) export class PersonsComponent implements OnInit { persons: { name: string; money: number; }[] = [ { name: '杰克', money: 120 }, { name: '李莉', money: 210 }, { name: '张三', money: 170 }, ]; @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective; constructor() { } ngOnInit(): void { } }
<app-persons> <ng-template appChildRef> <div >this is child ref content</div> </ng-template> </app-persons>
eg: 现在希望通过 persons 数据中的字段进行绑定内嵌的模板来显示
import { Directive, Input, TemplateRef } from '@angular/core'; @Directive({ selector: '[appChildRef]' }) export class ChildRefDirective { // 接受定义模板名称-通过这个名称和 persons 中的render字段对应进行显示对应的模板内容 @Input() appChildRef!: string; constructor(public templateRef: TemplateRef<any>) { } }
<div class="list-item" *ngFor="let person of persons;let i=index;"> <div>Name: {{ person.name }}</div> <div>Money: {{ person.money }}</div> <!-- <div *ngIf="person.money > 200"> <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container> </div> --> <div *ngIf="person.render && tempRefs[person.render]"> <!-- 配合 ngTemplateOutlet 指令给template传递当前person的数据 --> <ng-container *ngTemplateOutlet="tempRefs[person.render].templateRef; context: { $implicit: person, i: i }"></ng-container> </div> </div>
import { Component, ContentChild, ContentChildren, OnInit, QueryList } from '@angular/core'; import { ChildRefDirective } from '../../../../directives/child-ref.directive'; @Component({ selector: 'app-form-unit', templateUrl: './form-unit.component.html', styleUrls: ['./form-unit.component.scss'] }) export class FormUnitComponent implements OnInit { persons: { name: string; money: number; render?: string; }[] = [ { name: '杰克', money: 120, render: 'temp1' }, { name: '李莉', money: 210, render: 'temp2' }, { name: '张三', money: 170, render: 'temp3' }, ]; // @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective; @ContentChildren(ChildRefDirective) childrenRef!: QueryList<ChildRefDirective>; get tempRefs() { const aObj: any = {}; this.childrenRef.forEach(template => { const key: string = template.appChildRef; aObj[key] = template; }) return aObj; } constructor() { } ngOnInit(): void { } }
<app-persons> <ng-template appChildRef="temp1" let-person let-index="i"> <div >{{index}}-{{person.name}}: this is temp1</div> </ng-template> <ng-template appChildRef="temp2" let-person let-index="i"> <div >{{index}}-{{person.name}}: this is temp2</div> </ng-template> <ng-template appChildRef="temp3" let-person let-index="i"> <div >{{index}}-{{person.name}}: this is temp3</div> </ng-template> </app-persons>
感谢各位的阅读,以上就是“angular内容投影怎么实现”的内容了,经过本文的学习后,相信大家对angular内容投影怎么实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。