angular内容投影怎么实现

魁首哥

作者

angular内容投影怎么实现

这篇文章主要讲解了“angular内容投影怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“angular内容投影怎么实现”吧！

单内容投影

利用ng-content来实现

<div><h3>标题</h3><ng-content></ng-content></div><app-content-single><div>thisiscontent</div></app-content-single>

多内容投影

利用ng-content来实现

<div><h4>HerderTitle</h4><ng-contentselect=".header"></ng-content><h4>BodyTitle</h4><ng-contentselect="[body]"></ng-content><h4>DefaultTitle</h4><ng-content></ng-content><h4>FooterTitle</h4><ng-contentselect="footer"></ng-content></div><app-content-more><div>thisisdefault01</div><divclass="header">thisisheader</div><div>thisisdefault02</div><divbody>thisisbody</div><div>thisisdefault03</div><footer>thisisfooter</footer><div>thisisdefault04</div></app-content-more>

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

单个条件的内容投影

eg: 假设现在有一个人员列表，当某个人的money大于200的时候，额外添加组件中模板定义的内容

定义一个 appChildRef 指令来配合 ng-template 获取模板

import{Directive,TemplateRef}from'@angular/core';@Directive({selector:'[appChildRef]'})exportclassChildRefDirective{constructor(publictemplateRef:TemplateRef<any>){}}

app-persons - html

<divclass="list-item"*ngFor="letpersonofpersons;"><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>

app-persons - ts

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']})exportclassPersonsComponentimplementsOnInit{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-templateappChildRef><div>thisischildrefcontent</div></ng-template></app-persons>

效果图

多个条件内容投影

eg: 现在希望通过 persons 数据中的字段进行绑定内嵌的模板来显示

appChildRef 调整

import{Directive,Input,TemplateRef}from'@angular/core';@Directive({selector:'[appChildRef]'})exportclassChildRefDirective{//接受定义模板名称-通过这个名称和persons中的render字段对应进行显示对应的模板内容@Input()appChildRef!:string;constructor(publictemplateRef:TemplateRef<any>){}}

app-persons - html

<divclass="list-item"*ngFor="letpersonofpersons;leti=index;"><div>Name:{{person.name}}</div><div>Money:{{person.money}}</div><div*ngIf="person.render&&tempRefs[person.render]"><ng-container*ngTemplateOutlet="tempRefs[person.render].templateRef;context:{$implicit:person,i:i}"></ng-container></div></div>

app-persons - ts

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']})exportclassFormUnitComponentimplementsOnInit{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>;gettempRefs(){constaObj:any={};this.childrenRef.forEach(template=>{constkey:string=template.appChildRef;aObj[key]=template;})returnaObj;}constructor(){}ngOnInit():void{}}

使用

<app-persons><ng-templateappChildRef="temp1"let-personlet-index="i"><div>{{index}}-{{person.name}}:thisistemp1</div></ng-template><ng-templateappChildRef="temp2"let-personlet-index="i"><div>{{index}}-{{person.name}}:thisistemp2</div></ng-template><ng-templateappChildRef="temp3"let-personlet-index="i"><div>{{index}}-{{person.name}}:thisistemp3</div></ng-template></app-persons>