One article to understand the three types of content projection in Angular (single slot, multi-slot, conditional)

This article will take you to understand the content projection in angular, and introduce single-slot content projection, multi-slot content projection, and conditional content projection. I hope it will be helpful to everyone!

[Related tutorial recommendation: "angular tutorial"]

Single slot content projection

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

zippy-basic.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-zippy-basic',
  template: `
  <h2 id="单插槽内容投影">单插槽内容投影</h2>
  <ng-content></ng-content>
`
})
export class ZippyBasicComponent {}

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

app.component.html

<!-- 将 app-zippy-basic 元素包裹的全部内容投影到 zippy-basic 组件中去 -->
<app-zippy-basic>
  <p>单插槽内容投影：投影数据</p>
</app-zippy-basic>

The effect is as follows:

ng-content element is a placeholder, it does not Real DOM elements will be created. Those custom attributes of ng-content will be ignored.

Multi-slot content projection

• The component template contains multiple ng-content tags.
• In order to distinguish the projected content that can be projected to the corresponding ng-content tag, you need to use the select attribute on the ng-content tag as identification .
• selectAttributes support any combination of tag names, attributes, CSS classes, and :not pseudo-classes.
• The ng-content tag without adding the select attribute will be used as the default slot. All matching projected content will be projected at the position of the ng-content.

zippy-multislot.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-zippy-multislot',
  template: `
  <h2 id="多插槽内容投影">多插槽内容投影</h2>
  <ng-content></ng-content>
  <ng-content select="[question]"></ng-content>
`
})
export class ZippyMultislotComponent {}

app.component.html

<!-- 使用 question 属性的内容将投影到带有 `select=[question]` 属性的 ng-content 元素。 -->
<app-zippy-multislot>
  <p question style="color: hotpink;">
    带question属性的p元素
  </p>
  <p style="color: lightgreen">不带question属性的p元素-->匹配到不带select属性的ng-content</p>
  <p>不带question属性的p元素-->匹配到不带select属性的ng-content</p>
</app-zippy-multislot>

The effect is as follows:

In the previous example, only the second ng-content element has the select attribute defined. As a result, the first ng-content element will receive any other content projected into the component.

Conditional content projection

It is recommended to use the ng-container tag because it is not required Render real DOM elements.

<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
<!-- 等同 -->
<ng-container [ngTemplateOutlet]="templateRefExp" [ngTemplateOutletContext]="contextExp"></ng-container>

Parameters	Type	Description
templateRefExp	TemplateRef | null	A string used to define the template reference and the context object of the template
contextExp	Object | null	is an object whose key name can be bound using the let statement in the local template. When using $implicit as a key name in a context object, it will be used as the default value.

ng-template The #ID of the tag will match templateRefExp, and ng- The content of the template tag is embedded in the specified ngTemplateOutlet.

Example 1:

<header>头部</header>
<main>
	<h3 id="内容">内容：</h3>
	<ng-container [ngTemplateOutlet]="greet"></ng-container>
</main>
<footer>底部</footer>

<ng-template #greet>
	<div>
		<h4 id="hi">hi!</h4>
		<h4 id="hello-nbsp-my-nbsp-dear-nbsp-friend">hello my dear friend!</h4>
	</div>
</ng-template>

Effect:

##ViewChild and ContentChild

• ContentChild: Relevant to the content sub-node, Operation of the projected content;
• ViewChild: Relevant to the view sub-node, Manipulate your own view content;

##ContentChild

In the previous part, we used content projection to allow custom component tags to be embedded in html tags Or customize the component label, so how does it operate 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、引入 part-b 组件
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、获取投影
	@ContentChild(PartBComponent) PartB:PartBComponent
	constructor() { }
	ngOnInit() {}
	ngAfterContentInit(): void {
		// 3、调用 part-b 组件的 func() 方法
		this.PartB.func();
	}
	public func() {
		console.log('PartA')
	}
}

Project the content of the

part-b

component to part-aIn the component<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;!-- content.component.html --&gt; &lt;div&gt; &lt;div&gt;Content&lt;/div&gt; &lt;div&gt; &lt;app-content-part-a&gt; &lt;!-- 投影在part-a组件中的内容 --&gt; &lt;h1 id=&quot;PartA-start&quot;&gt;PartA--start&lt;/h1&gt; &lt;app-content-part-b&gt;&lt;/app-content-part-b&gt; &lt;span&gt;PartA--end&lt;/span&gt; &lt;/app-content-part-a&gt; &lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div>

In the life cycle of the component, there is a hook

ngAfterContentInit()

It is related to the initialization of the projected content, so we are concerned with the projected content The operation should be carried out after its initialization is completed.

ViewChild

The

ContentChild

operation in the previous part is performed when the incoming content is projected, and ViewChild operates on its own view content Modify the previous part of content.component.html
as follows: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;!-- content.component.html --&gt; &lt;div&gt; &lt;div&gt;Content&lt;/div&gt; &lt;div&gt; &lt;!-- 在此处引用模板变量 #partA --&gt; &lt;app-content-part-a #partA&gt; &lt;h1 id=&quot;PartA-start&quot;&gt;PartA--start&lt;/h1&gt; &lt;app-content-part-b&gt;&lt;/app-content-part-b&gt; &lt;span&gt;PartA--end&lt;/span&gt; &lt;/app-content-part-a&gt; &lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>/**** content.component.ts ****/ import { Component, OnInit, ViewChild } from &amp;#39;@angular/core&amp;#39;; @Component({ selector: &amp;#39;app-content&amp;#39;, templateUrl: &amp;#39;./content.component.html&amp;#39;, styleUrls: [&amp;#39;./content.component.scss&amp;#39;] }) export class ContentComponent implements OnInit { // 2、获取视图 partA @ViewChild(&amp;#39;partA&amp;#39;) partA: any; constructor() { } ngOnInit() {} ngAfterViewInit(): void { // 3、调用 part-a 组件的 func() 方法 this.partA.func(); } }</pre><div class="contentsignin">Copy after login</div></div>

ngAfterContentInit( )

corresponds tongAfterViewInit()(View node initialization is after initialization of projected content)

ContentChild

and ViewChildThere are also plural forms, namely ContentChildren and ViewChildren. They get a collection of nodes, and there is no difference between the others. 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<PartBComponent>;

	constructor() { }
	ngOnInit() {}
}

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of One article to understand the three types of content projection in Angular (single slot, multi-slot, conditional). For more information, please follow other related articles on the PHP Chinese website!