Angular6 学习笔记——内容投影, ViewChild和ContentChild
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:
系列目录
(1)组件详解之模板语法
(2)组件详解之组件通讯
(3)内容投影, ViewChild和ContentChild
(4)指令
(5)路由
内容投影
1为什么需要内容投影?
一个事物的出现,必然存在它所能解决的问题,让我们先从问题出发吧:
大家应该都知道,在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,并且可行
同时,在Angular里面,我们可以通过自定义标签的方式引用组件,那么这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?
于是就引入我们今天的主要问题,用一个详细的例子来描述吧:
假设存在父组件Content,和它下面2个子组件PartA和PartB,自定义标签分别为:<app-content>,<app-content-part-a>,<app-content-part-b>,目录结构如下
如果想在父组件的视图里面,完成下面的内容,是否可行呢?
content.component.html 1 <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>
这样是不行的,其结果只会显示自定义的组件<app-content-part-a>自身的内容,因为自定义组件标签会忽略嵌套其中的html原生标签或者其他的自定义组件标签,从而使它们无法产生任何效果
2如何使用内容投影?
上述问题通过内容投影则能够解决,那么如何使用内容投影呢?
只需要在组件PartA的视图里面做一些改动,内容如下
part-a.component.html 1 <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标签或自定义组件标签,那么它如何操作投影进来的内容呢?
还是以上述内容为例,从实际的问题出发:假设嵌入的自定义组件标签<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'; @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 1 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几乎没有理解难度,他们的差异不大,所不同的是:
1ViewChild是操作视图本身存在的节点,而不是投影进来的内容
2ngAfterContentInit()对应的是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.cnblogs.com/banluduxing/p/10394387.html
- 版权信息:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接。
Angular6 学习笔记——内容投影, ViewChild和ContentChild的更多相关文章
- Angular6 学习笔记——指令
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular6 学习笔记——组件详解之模板语法
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular6 学习笔记——路由详解
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- 01_Hadoop学习笔记内容说明
Hadoop学习笔记内容说明_00 1. 观看云帆大数据梦琪老师的<企业级 Hadoop 1.x 应用开发基础课程>2014年4月左右版本. 2. 博客是在梦琪老师的随堂笔记上改动的, ...
- .NET GC机制学习笔记
学习笔记内容来自网络资料摘录http://www.cnblogs.com/springyangwc/archive/2011/06/13/2080149.html 1.GC介绍 Garbage Col ...
- jeecms学习笔记
jeecms学习笔记 内容管理系统 1.栏目列表标签 作用:获取栏目的列表 [@cms_channel_list] [#list tag_list as b] <a href="${b ...
- C++内存管理学习笔记(3)
/****************************************************************/ /* 学习是合作和分享式的! /* Auth ...
- [原创]java WEB学习笔记90:Hibernate学习之路-- -HQL检索方式,分页查询,命名查询语句,投影查询,报表查询
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
随机推荐
- Princess Principal(思维题)
Princess Principal https://www.nowcoder.com/acm/contest/201/J 题目描述 阿尔比恩王国(the Albion Kingdom)潜伏着一群代号 ...
- 在c#中设置Excel格式
生成excel的时候有时候需要设置单元格的一些属性,可以参考一下: range.NumberFormatLocal = "@"; //设置单元格格式为文本 ange.get_Ran ...
- TZOJ 4435 n皇后问题(回溯)
描述 在 n×n 的国际象棋棋盘上放置n个皇后,使得任何一个皇后都无法直接吃掉其他的皇后(任两个皇后都不能处于同一条横行.纵行或斜线上) 输入 输入有多组(直到-1结束) 每组一行 一个整数 n(0& ...
- MVC FormCollection 无法获取值的问题
把action定义为[HttpPost],并且ajax.beginform中ajaxoption中定义为Post,在提交表单时就可以获取FormCollection的值了.httpGet或者后台不定 ...
- Package gtk+-3.0 was not found in the pkg-config search path
问题描述: 在fedora21系统上通过rpmbuild构建fcitx的二进制包时出现以上错误,经老程序员指点:“是相应的开发包没有安装” 解决办法: yum installl gtk3-devel ...
- c++11 随机代码记录
// RadomTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #includ ...
- part1:3-VMware及redhat enterprise Linux 6 的安装
创建虚拟机PC FILE->NEW Virtual machine->custom(自定义,定制)->...->I WILL INSTALL THE OS LATER-> ...
- 【Linux】SVN的安装和配置
SVN SVN:SVN是Subversion的简称,是一种开放代码的版本控制系统,相比较RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制器服务已从CVS迁移到Su ...
- 2018.08.21 bzoj4668: 冷战(并查集+启发式合并)
传送门 可以发现需要维护连通性和两点连通时间. 前者显然是并查集的常规操作,关键就在于如何维护两点的连通时间. 然后会想到这个时候不能用路径压缩了,因为它会破坏原本树形集合的结构,因此可以启发式按si ...
- java,arduino,C#之间的一些编码转换
1.C#-> Encoding.UTF8.GetBytes( "abc中") ->[97,98,99,228,184,173] java->byte[] bs= ...