angular内容投影怎么实现

魁首哥

作者

+ 关注

angular内容投影怎么实现

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

单内容投影

利用ng-content来实现

标题

thisiscontent

多内容投影

利用ng-content来实现

HerderTitle

BodyTitle

DefaultTitle

FooterTitle

thisisdefault01

thisisheader

thisisdefault02

thisisbody

thisisdefault03

thisisdefault04

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

单个条件的内容投影

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

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

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

app-persons - html

Name:{{person.name}}

Money:{{person.money}}

200">

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{}}

使用

效果图

多个条件内容投影

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

appChildRef 调整

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

app-persons - html