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

This article introduces the relevant knowledge of "how many kinds of content projection in angular". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Single slot content projection

Single-slot content projection refers to creating a component in which you can project a component.

Zippy-basic.component.ts

Import {Component} from'@ angular/core';@Component ({selector: 'app-zippy-basic', template: `single slot content projection `}) export class ZippyBasicComponent {}

With the ng-content element, users of the component can now project their own messages into the component. For example:

App.component.html

Single-slot content projection: projection data

The effect is as follows:

The ng-content element is a placeholder and does not create a real DOM element. Those custom properties of ng-content will be ignored.

Multi-slot content projection

The component template contains multiple ng-content tags.

In order to distinguish that the projected content can be projected to the corresponding ng-content tag, you need to use the select attribute on the ng-content tag as recognition.

The select attribute supports any combination of label signatures, attributes, CSS classes, and: not pseudo classes.

Ng-content tags that do not add select attributes will be used as default slots. All projected content that is a match is projected at the location of the ng-content.

Zippy-multislot.component.ts

Import {Component} from'@ angular/core';@Component ({selector: 'app-zippy-multislot', template: `Multi-slot content projection `}) export class ZippyMultislotComponent {}

App.component.html

P element with question attribute

P element without question attribute-- > matches to ng-content without select attribute

P element without question attribute-- > matches to ng-content without select attribute

The effect is as follows:

In the previous example, only the second ng-content element defines the select attribute. As a result, the first ng-content element receives anything else projected into the component.

Conditional content projection

The ng-container tag is recommended because it does not need to render real DOM elements.

Parameter type description templateRefExpTemplateRef | null A string that defines the template reference and the template context object contextExpObject | null is an object whose key name can be bound in the local template using the let declaration. When $implicit is used as the key name in the context object, it is taken as the default value.

The # ID of the ng-template tag matches the templateRefExp, embedding the contents of the ng-template tag into the specified ngTemplateOutlet.

Example 1:

Premium content: bottom hi! Hello my dear friend!

Effect:

ViewChild and ContentChild

ContentChild: manipulates the projected content related to the content child node

ViewChild: manipulates its own view content related to the view child node

ContentChild

In the previous section, we used content projection so that custom component tags can be embedded in html tags or custom component tags, so how does it manipulate the projected content?

First create two components

/ * part-b.component.ts * / import {Component, OnInit,Output} from'@ angular/core' @ Component ({selector: 'app-content-part-b', templateUrl:'. / part-b.component.html', styleUrls: ['. / part-b.component.scss']}) export class PartBComponent implements OnInit {constructor () {} ngOnInit () {} public func (): void {console.log ("PartB") }} / * part-a.component.ts * / import {Component, OnInit, ContentChild} from'@ angular/core';// 1, introduce part-b component import {PartBComponent} from'.. / part-b/part-b.component' @ Component ({selector: 'app-content-part-a', templateUrl:'. / part-a.component.html' StyleUrls: ['. / part-a.component.scss']}) export class PartAComponent implements OnInit {/ / 2, get the projection @ ContentChild (PartBComponent) PartB:PartBComponent constructor () {} ngOnInit () {} ngAfterContentInit (): void {/ / 3, call the func () method this.PartB.func () of the part-b component } public func () {console.log ('PartA')}}

Project the contents of the part-b component into the part-a component

Content PartA--start PartA--end

In the life cycle of the component, there is a hook ngAfterContentInit () that is related to the initialization of the projection content, so we try to put the operation on the projection content after its initialization is completed.

ViewChild

The content projected during the ContentChild operation in the previous section, while the ViewChild operates on its own view content

Modify the content.component.html in the previous section as follows:

Content PartA--start PartA--end / * content.component.ts * / import {Component, OnInit, ViewChild} from'@ angular/core' @ Component ({selector: 'app-content', templateUrl:'. / content.component.html', styleUrls: ['. / content.component.scss']}) export class ContentComponent implements OnInit {/ / 2, get the view partA @ ViewChild ('partA') partA: any Constructor () {} ngOnInit () {} ngAfterViewInit (): void {/ / 3, call the func () method of the part-a component this.partA.func ();}}

NgAfterContentInit () corresponds to ngAfterViewInit () (view node initialization is after projection content initialization)

ContentChild and ViewChild also have plural forms, that is, ContentChildren and ViewChildren, which take a collection of nodes, and there is no difference between the others.

It is written as follows:

Import {Component, OnInit, ContentChild,ContentChildren, QueryList} from'@ angular/core';import {PartBComponent} from'.. / part-b/part-b.component';@Component ({selector: 'app-content-part-a', templateUrl:'. / part-a.component.html', styleUrls: ['. / part-a.component.scss']}) export class PartAComponent implements OnInit {@ ContentChildren (PartBComponent) PartBs: QueryList Constructor () {} ngOnInit () {}} "what are the kinds of content projection in angular"? thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.