angular內容投影詳解

更新時間：2021年12月22日 15:39:23 作者：桐溪漂流

這篇文章主要為大家介紹了angular內容投影，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

單內容投影

利用ng-content來實現(xiàn)

<!-- 組件 - app-content-single -->
<div>
  <h2>標題</h2>
  <!-- 投影內容顯示位置 -->
  <ng-content></ng-content>
</div>
<!-- 使用 -->
<app-content-single>
  <div>this is content</div>
</app-content-single>

多內容投影

利用ng-content來實現(xiàn)

<!-- 組件 - app-content-more -->
<div>
  <h3>Herder Title</h3>
  <ng-content select=".header"></ng-content>
  <h3>Body Title</h3>
  <ng-content select="[body]"></ng-content>
  <h3>Default Title</h3>
  <ng-content></ng-content>
  <h3>Footer Title</h3>
  <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 等來配合實現(xiàn)

單個條件的內容投影

eg: 假設現(xiàn)在有一個人員列表，當某個人的money大于200的時候，額外添加組件中模板定義的內容

定義一個 appChildRef 指令來配合 ng-template 獲取模板

import { Directive, TemplateRef } from '@angular/core';
@Directive({
  selector: '[appChildRef]'
})
export class ChildRefDirective {
  constructor(public templateRef: TemplateRef<any>) { }
}

app-persons - html

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

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

使用

<app-persons>
  <ng-template appChildRef>
    <div style="font-size: 14px; color: red;">this is child ref content</div>
  </ng-template>
</app-persons>

效果圖

多個條件內容投影

eg: 現(xiàn)在希望通過 persons 數(shù)據(jù)中的字段進行綁定內嵌的模板來顯示

appChildRef 調整

import { Directive, Input, TemplateRef } from '@angular/core';
@Directive({
  selector: '[appChildRef]'
})
export class ChildRefDirective {
  // 接受定義模板名稱-通過這個名稱和 persons 中的render字段對應進行顯示對應的模板內容
  @Input() appChildRef!: string;
  constructor(public templateRef: TemplateRef<any>) { }
}

app-persons - html

<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的數(shù)據(jù) -->
    <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']
})
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 style="font-size: 14px; color: red;">{{index}}-{{person.name}}: this is temp1</div>
  </ng-template>
  <ng-template appChildRef="temp2" let-person let-index="i">
    <div style="font-size: 14px; color: green;">{{index}}-{{person.name}}: this is temp2</div>
  </ng-template>
  <ng-template appChildRef="temp3" let-person let-index="i">
    <div style="font-size: 14px; color: orange;">{{index}}-{{person.name}}: this is temp3</div>
  </ng-template>
</app-persons>

效果圖

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

您可能感興趣的文章:

AngularJS中下拉框的高級用法示例
這篇文章主要介紹了AngularJS中下拉框的高級用法,結合實例形式分析了AngularJS下拉框的遍歷、選擇、綁定、顯示等功能實現(xiàn)方法,需要的朋友可以參考下
2017-10-10
Angular6封裝http請求的步驟詳解
最近抽空學習了一下Angular6，之前主要使用的是vue，所以免不了的也想對Angular6提供的工具進行一些封裝，今天主要就跟大家講一下這個http模塊
2018-08-08
Angularjs 基礎入門
這篇文章主要介紹了Angularjs 基礎入門的一些知識,需要的朋友可以參考下
2014-12-12
AngularJS模塊學習之Anchor Scroll
這篇文章主要介紹了AngularJS模塊學習之Anchor Scroll 的相關資料,需要的朋友可以參考下
2016-01-01
深入講解AngularJS中的自定義指令的使用
這篇文章主要介紹了深入講解AngularJS中的自定義指令的使用,AngularJS是一款熱門的JavaScript開發(fā)庫,需要的朋友可以參考下
2015-06-06
Angular4綁定html內容出現(xiàn)警告的處理方法
這篇文章主要給大家介紹了關于Angular4綁定html內容出現(xiàn)警告的處理方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-11-11
Angular5集成eventbus的示例代碼
這篇文章主要介紹了Angular5集成eventbus的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
AngularJS中$http服務常用的應用及參數(shù)
大家都知道，AngularJS中的$http有很多參數(shù)和調用方法，所以本文只記錄了比較常用的應用及參數(shù)，方便大家以后使用的時候參考學習，下面一起來看看吧。
2016-08-08
淺談Angular路由復用策略
本篇文章主要介紹了淺談Angular路由復用策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
angular6 填坑之sdk的方法
這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12