Shulou(Shulou.com)06/02 Report--

This article mainly explains the "angular content projection how to achieve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "angular content projection how to achieve" it!

Single content projection

Using ng-content to realize

Title this is content multi-content projection

Using ng-content to realize

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 footer this is default04

Conditional content projection-ng-template, ng-container, directive, etc. to cooperate with the implementation.

Content projection of a single condition

Eg: suppose you now have a list of people. When someone's money is greater than 200, add additional content defined by the template in the component.

Define an appChildRef instruction to cooperate with ng-template to get the 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-tsimport {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: 'Jack', money: 120}, {name:'Li Li', money: 210}, {name: 'Zhang San', money: 170},] @ ContentChild (ChildRefDirective, {static: true}) childRefect: ChildRefDirective; constructor () {} ngOnInit (): void {}} use this is child ref content effect

Multiple conditional content projection

Eg: now you want to bind embedded templates to display through the fields in the persons data

AppChildRef adjusts import {Directive, Input, TemplateRef} from'@ angular/core';@Directive ({selector:'[appChildRef]'}) export class ChildRefDirective {/ / accept the definition template name-this name corresponds to the render field in persons to display the corresponding template content @ Input () appChildRefect: string Constructor (public templateRef: TemplateRef) {} app-persons-html Name: {{person.name}} Money: {{person.money}} app-persons-tsimport {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: 'Jack', money: 120, render: 'temp1'}, {name:' Li', money: 210, render: 'temp2'}, {name:' Zhang San', money: 170, render: 'temp3'},]; / / @ ContentChild (ChildRefDirective, {static: true}) childRefences: ChildRefDirective; @ ContentChildren (ChildRefDirective) childrenRefences: QueryList; get tempRefs () {const aObj: any = {} This.childrenRef.forEach (template = > {const key: string = template.appChildRef; aObj [key] = template;}) return aObj;} constructor () {} ngOnInit (): void {}} use {{index}}-{{person.name}}: this is temp1 {{index}}-{{person.name}}: this is temp2 {{index}}-{{person.name}}: this is temp3 effect

Thank you for your reading, the above is the content of "how to achieve angular content projection", after the study of this article, I believe you have a deeper understanding of how to achieve angular content projection, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.