Angular6 学习笔记——内容投影, ViewChild和ContentChild

蔚落 2023-05-30 15:57 34阅读 0赞

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:

*  [https://www.angular.cn/guide/template-syntax][https_www.angular.cn_guide_template-syntax]
 *  [http://www.ngfans.net/topic/12/post/2][http_www.ngfans.net_topic_12_post_2]

## 系列目录 ##

[(1)组件详解之模板语法][1]

[(2)组件详解之组件通讯][2]

[(3)内容投影, ViewChild和ContentChild][3_ ViewChild_ContentChild]

[(4)指令][4]

[(5)路由][5]

## 内容投影 ##

**1、为什么需要内容投影?**  
一个事物的出现,必然存在它所能解决的问题,让我们先从问题出发吧:  
大家应该都知道,在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,并且可行  
同时,在Angular里面,我们可以通过自定义标签的方式引用组件,那么这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?  
于是就引入我们今天的主要问题,用一个详细的例子来描述吧:  
假设存在父组件Content,和它下面2个子组件PartA和PartB,自定义标签分别为:,,,目录结构如下

![在这里插入图片描述][20191111111221966.png]

如果想在父组件的视图里面,完成下面的内容,是否可行呢?

content.component.html 
    
      <div>
        <div>Content</div>
        <div>
          <app-content-part-a>
            <h1>PartA--start</h1>
            <app-content-part-b></app-content-part-b>
            <span>PartA--end</span>
          </app-content-part-a>
        </div>
     </div>

这样是不行的,其结果只会显示自定义的组件自身的内容,因为自定义组件标签会忽略嵌套其中的html原生标签或者其他的自定义组件标签,从而使它们无法产生任何效果

**2、如何使用内容投影?**  
上述问题通过内容投影则能够解决,那么如何使用内容投影呢?

只需要在组件PartA的视图里面做一些改动,内容如下

part-a.component.html
    
    <div>
          <div>
              <ng-content select="h1"></ng-content>
          </div>
          <div>
              <ng-content select="app-content-part-b"></ng-content>
          </div>
          <div>
              <ng-content select="span"></ng-content>
         </div>
     </div>

经过这样的修改,上述想要实现的效果就可以达到

那么内容投影是如何工作的呢?

首先通过angular里面的一个指令`ng-content`,实现占位,再通过`select`,达到选择器的作用,这样在组件生命周期过程,初始渲染投影内容的时候,就能够将对应的内容投影到特定的位置,这就是内容投影工作的简单描述

组件里面嵌套组件,之间的通讯问题可以参考组件间的通讯

**ContentChild和ViewChild**

首先做个简单的介绍:

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

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

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

还是以上述内容为例,从实际的问题出发:假设嵌入的自定义组件标签里面声明了一个方法func(),那么如何在里面去操作这个方法呢?  
上面说过,`ContentChild`是操作投影进来的内容,那么在这里我们也可以通过它解决问题,在组件PartA内,通过`ContentChild`获取投影进来的组件PartB,并对它进行操作(部分代码在上一部分已经贴出,这一部分不予重复),代码如下

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';
      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 { 
     
     @ContentChild(PartBComponent) PartB:PartBComponent
     
       constructor() {  }
     
       ngOnInit() { }
     
       ngAfterContentInit(): void { 
         this.PartB.func();
       }
     }

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

如果理解了`ContentChild`的用法,那么`ViewChild`几乎没有理解难度,他们的差异不大,所不同的是:

1.`ViewChild`是操作视图本身存在的节点,而不是投影进来的内容

2.`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<PartBComponent>;
     
       constructor() {  }
     
       ngOnInit() { }
     
     }

上述代码中PartBs是组件PartB的一个集合,这就是复数的用法,ViewChildren不再赘述

(终)

[https_www.angular.cn_guide_template-syntax]: https://www.angular.cn/guide/template-syntax
[http_www.ngfans.net_topic_12_post_2]: http://www.ngfans.net/topic/12/post/2
[1]: https://blog.csdn.net/weixin_42740530/article/details/103006071
[2]: https://blog.csdn.net/weixin_42740530/article/details/103006390
[3_ ViewChild_ContentChild]: https://blog.csdn.net/weixin_42740530/article/details/103006940
[4]: https://blog.csdn.net/weixin_42740530/article/details/103006969
[5]: https://blog.csdn.net/weixin_42740530/article/details/103006997
[20191111111221966.png]: https://img-blog.csdnimg.cn/20191111111221966.png