angular内容投影怎么实现

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

单内容投影

利用ng-content来实现

  
标题
    
  
this is content

多内容投影

利用ng-content来实现

  
Herder Title
    
Body Title
    
Default Title
    
Footer Title
  
  
this is default01
  
this is header
  
this is default02
  
this is body
  
this is default03
    
this is default04

有条件的内容投影-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) { }}

app-persons - html

  
Name: {{ person.name }}
  
Money: {{ person.money }}
  
      

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']})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 { }}

使用

      
this is child ref content
  

效果图

多个条件内容投影

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

appChildRef 调整

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

app-persons - html

  
Name: {{ person.name }}
  
Money: {{ person.money }}
    
          

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']})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;  get tempRefs() {    const aObj: any = {};    this.childrenRef.forEach(template => {      const key: string = template.appChildRef;      aObj[key] = template;    })    return aObj;  }  constructor() { }  ngOnInit(): void { }}

使用

      
{{index}}-{{person.name}}: this is temp1
        
{{index}}-{{person.name}}: this is temp2
        
{{index}}-{{person.name}}: this is temp3
  

效果图

感谢各位的阅读，以上就是"angular内容投影怎么实现"的内容了，经过本文的学习后，相信大家对angular内容投影怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！