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

 content.component.html 

 1 <div>
 2   <div>Content</div>
 3   <div>
 4     <app-content-part-a>
 5       <h1>PartA--start</h1>
 6       <app-content-part-b></app-content-part-b>
 7       <span>PartA--end</span>
 8     </app-content-part-a>
 9   </div>
10 </div>

这样是不行的,其结果只会显示自定义的组件<app-content-part-a>自身的内容,由于自定义组件标签会忽略嵌套其中的html原生标签或者其余的自定义组件标签,从而使它们没法产生任何效果

2如何使用内容投影?

上述问题经过内容投影则可以解决,那么如何使用内容投影呢?

只须要在组件PartA的视图里面作一些改动,内容以下

 part-a.component.html

 1 <div>
 2     <div>
 3         <ng-content select="h1"></ng-content>
 4     </div>
 5     <div>
 6         <ng-content select="app-content-part-b"></ng-content>
 7     </div>
 8     <div>
 9         <ng-content select="span"></ng-content>
10     </div>
11 </div>

通过这样的修改,上述想要实现的效果就能够达到

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

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

组件里面嵌套组件,之间的通信问题能够参考组件间的通信

ContentChild和ViewChild

首先作个简单的介绍:

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

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

在上一部分,咱们经过内容投影,让自定义的组件标签可以嵌入html标签或自定义组件标签,那么它如何操做投影进来的内容呢?

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

 part-b.component.ts

 1 import { Component, OnInit,Output} from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-content-part-b',
 5   templateUrl: './part-b.component.html',
 6   styleUrls: ['./part-b.component.scss']
 7 })
 8 export class PartBComponent implements OnInit {
 9   constructor() { }
10 
11   ngOnInit() {
12   }
13 
14   public func():void{
15    console.log("PartB");
16   } 
17 }

 part-a.component.ts

 1 import { Component, OnInit, ContentChild } from '@angular/core';
 2 import { PartBComponent } from '../part-b/part-b.component';
 3 
 4 @Component({
 5   selector: 'app-content-part-a',
 6   templateUrl: './part-a.component.html',
 7   styleUrls: ['./part-a.component.scss']
 8 })
 9 export class PartAComponent implements OnInit {
10 
11 @ContentChild(PartBComponent) PartB:PartBComponent
12 
13   constructor() { }
14 
15   ngOnInit() {}
16 
17   ngAfterContentInit(): void {
18     this.PartB.func();
19   }
20 }

这里须要注意一点:在组件的生命周期里面,有一个钩子ngAfterContentInit()是与投影内容初始化有关,因此咱们有关投影的内容操做尽可能放在它初始化完成以后进行

若是理解了ContentChild的用法,那么ViewChild几乎没有理解难度,他们的差别不大,所不一样的是:

1ViewChild是操做视图自己存在的节点,而不是投影进来的内容

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

其余没有什么不一样,这里我就再也不赘述

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

写法以下:

 1 import { Component, OnInit, ContentChild,ContentChildren ,QueryList } from '@angular/core';
 2 import { PartBComponent } from '../part-b/part-b.component';
 3 
 4 @Component({
 5   selector: 'app-content-part-a',
 6   templateUrl: './part-a.component.html',
 7   styleUrls: ['./part-a.component.scss']
 8 })
 9 export class PartAComponent implements OnInit {
10 
11 @ContentChildren(PartBComponent)
12 PartBs: QueryList<PartBComponent>;
13 
14   constructor() { }
15 
16   ngOnInit() {}
17 
18 }

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

(终)

文档信息

发表做者：半路独行
发表出处：博客园
原文地址： http://www.javashuo.com/article/p-bdynkvwv-et.html
版权信息：本做品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

感谢您的阅读，若是您以为阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，可是转载文章以后必须在文章页面中给出做者和原文链接。