angular中的内容投影有哪几种

本篇内容介绍了"angular中的内容投影有哪几种"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

单插槽内容投影

单插槽内容投影是指创建一个组件，你可以在其中投影一个组件。

zippy-basic.component.ts

import { Component } from '@angular/core';@Component({  selector: 'app-zippy-basic',  template: `  
单插槽内容投影
  `})export class ZippyBasicComponent {}

有了 ng-content 元素，该组件的用户现在可以将自己的消息投影到该组件中。例如：

app.component.html

  
单插槽内容投影：投影数据

效果如下：

ng-content 元素是一个占位符，它不会创建真正的 DOM 元素。ng-content 的那些自定义属性将被忽略。

多插槽内容投影

• 组件模板含有多个ng-content标签。

• 为了区分投影的内容可以投影到对应ng-content标签，需要使用ng-content标签上的select属性作为识别。

• select属性支持标签名、属性、CSS 类和 :not 伪类的任意组合。

• 不添加select属性的ng-content标签将作为默认插槽。所有为匹配的投影内容都会投影在该ng-content的位置。

zippy-multislot.component.ts

import { Component } from '@angular/core';@Component({  selector: 'app-zippy-multislot',  template: `  
多插槽内容投影
    `})export class ZippyMultislotComponent {}

app.component.html

  
    带question属性的p元素  
  
不带question属性的p元素-->匹配到不带select属性的ng-content
  
不带question属性的p元素-->匹配到不带select属性的ng-content

效果如下：

在前面的示例中，只有第二个 ng-content 元素定义了select 属性。结果，第一个 ng-content 元素就会接收投影到组件中的任何其他内容。

有条件的内容投影

推荐使用ng-container标签，因为该标签不需要渲染真实的 DOM 元素。

ng-template 标签的#ID会匹配templateRefExp，将ng-template标签的内容嵌入到指定的ngTemplateOutlet中。

例一：

头部
        
内容：
        
        
                
hi!
                
hello my dear friend!
        

效果：

ViewChild和ContentChild

• ContentChild:与内容子节点有关,操作投影进来的内容;

• ViewChild:与视图子节点有关,操作自身的视图内容;

ContentChild

在上一部分,我们通过内容投影,让自定义的组件标签能够嵌入html标签或自定义组件标签,那么它如何操作投影进来的内容呢?

首先创建两个组件

/**** 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')        }}

将part-b组件的内容投影到part-a组件中

 
        
Content
        
                                                        
PartA--start
                                                PartA--end                        

在组件的生命周期里面,有一个钩子ngAfterContentInit()是与投影内容初始化有关,所以我们有关投影的内容操作尽量放在它初始化完成之后进行

ViewChild

上一部分的ContentChild操作的时投影进来的内容，而ViewChild操作的是自身的视图内容
给上一部分的content.component.html修改如下：

 
        
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、获取视图 partA        @ViewChild('partA') partA: any;        constructor() { }        ngOnInit() {}        ngAfterViewInit(): void {                // 3、调用 part-a 组件的 func() 方法                this.partA.func();        }}

ngAfterContentInit()对应的是ngAfterViewInit()(视图节点初始化是在投影内容初始化之后)

ContentChild和ViewChild还存在复数的形式,即ContentChildren和ViewChildren,它们取到的是节点的一个集合,其他的没有什么区别

写法如下：

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

"angular中的内容投影有哪几种"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！