angular內(nèi)容投影詳解
更新時間：2021年12月22日 15:39:23 作者：桐溪漂流
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
單內(nèi)容投影
利用ng-content來實現(xiàn)
<!-- 組件 - app-content-single --> <div> <h2>標題</h2> <!-- 投影內(nèi)容顯示位置 --> <ng-content></ng-content> </div> <!-- 使用 --> <app-content-single> <div>this is content</div> </app-content-single>
多內(nèi)容投影
利用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>
有條件的內(nèi)容投影-ng-template, ng-container, directive 等來配合實現(xiàn)
單個條件的內(nèi)容投影
eg: 假設現(xiàn)在有一個人員列表，當某個人的money大于200的時候，額外添加組件中模板定義的內(nèi)容
定義一個 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>
效果圖
多個條件內(nèi)容投影
eg: 現(xiàn)在希望通過 persons 數(shù)據(jù)中的字段進行綁定內(nèi)嵌的模板來顯示
appChildRef 調(diào)整
import { Directive, Input, TemplateRef } from '@angular/core';
@Directive({
selector: '[appChildRef]'
})
export class ChildRefDirective {
// 接受定義模板名稱-通過這個名稱和 persons 中的render字段對應進行顯示對應的模板內(nèi)容
@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>
效果圖
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
這篇文章主要給大家介紹了關于angular8和ngrx8結(jié)合使用的詳細步驟，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angular8具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
AngularJS ng-controller 指令簡單實例
本文主要介紹AngularJS ng-controller 指令,這里對ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08
本文通過實例代碼給大家介紹了angularjs $parse的相關知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
跨域，前端開發(fā)中經(jīng)常遇到的問題，下面這篇文章主要給大家介紹了關于angular.js中解決跨域問題的三種方式，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
angularJs提交文本框數(shù)據(jù)到后臺的方法
今天小編就為大家分享一篇angularJs提交文本框數(shù)據(jù)到后臺的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
作為一種大受歡迎的Web應用程序框架,Angular終于迎來了版本4.0，下面這篇文章主要給大家介紹了關于Angular 4.0學習教程之架構(gòu)的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要介紹了AngularJS中的模塊,文中講到了其應用模塊和控制器模塊的例子,需要的朋友可以參考下2015-06-06
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
AngularJS 通過新的屬性和表達式擴展了 HTML。AngularJS 可以構(gòu)建一個單一頁面應用程序（SPAs：Single Page Applications）。本文給大家介紹angularjs 的相關知識，感興趣的朋友一起看看吧2017-10-10
Angular.js實現(xiàn)多個checkbox只能選擇一個的方法示例
這篇文章主要給大家介紹了利用Angular.js實現(xiàn)多個checkbox只能選擇一個的方法，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，下面來一起看看吧。2017-02-02