原文

  https://www.jianshu.com/p/5ab619e576ea

大纲

  1、认识ViewChild
  2、认识ContentChild
  3、ViewChild与ContentChild的联系和区别

认识ViewChild

/*
angular中文文档的说明
You can use ViewChild to get the first element or the directive
matching the selector from the view DOM. If the view DOM changes,
and a new child matches the selector, the property will be updated. View queries are set before the ngAfterViewInit callback is called. Metadata Properties:
1、selector - the directive type or the name used for querying.
2、read - read a different token from the queried elements. 翻译:
你可以使用ViewChild去获得从DOM视图中通过选择器匹配到的第一个元素或者指令。
如果这个DOM视图发生变化,那么对应匹配到的ViewChild也会跟着更新。(更新未实现)
视图的获取是在ngAfterViewInit的时候
元数据匹配:
1、选择器:指令类型(包括组件)
2、根据不同的token获取节点元素(token指模板变量,如#child) 通俗翻译:
可以通过ViewChild这个装饰器获取视图元素中的内容,
这个视图包括视图模板中的视图元素,也包括作为子组件放置在视图模板中的内容。
ViewChild装饰器不可以在constructor的时候注入,
因为ViewChild装饰器获取元素是在ngAfterViewInit回调前被调用,
即在ngAfterViewInit中才实现
ViewChild装饰器获取目标元素的方式有两种:
1、一种是通过在模板元素中存在的子组件的组件名,如:ChildComponent
2、一种是通过获取模板元素的模板变量如#child来指定获取
*/

认识ContentChild

/*
angular中文文档:
You can use ContentChild to get the first element or the directive
matching the selector from the content DOM. If the content DOM changes,
and a new child matches the selector, the property will be updated. Content queries are set before the ngAfterContentInit callback is called. Metadata Properties:
1、selector - the directive type or the name used for querying.
2、read - read a different token from the queried element. 翻译:
你可以使用ContentChild去获得从DOM视图中通过选择器匹配到的第一个元素或者指令。
如果内容DOM发生变化,并且新的子项与选择器匹配,则属性将被更新。
内容查询发生在ngAfterContentInit回调前,即contentChild的获取发生在生命周期
ngAfterContentInit。 元数据属性:
1、选择器——用于查询的指令类型或名称。
2、从查询元素读取不同的令牌。
*/

ViewChild与ContentChild的联系和区别

/*
ViewChild和ContentChild其实都是从子组件中获取内容的装饰器 它们本质的区别其实就只是在于方法调用的时机以及获取内容的地方: 1、时机:
ViewChild在ngAfterViewInit的回调中调用
ContentChild在ngAfterContentInit的回调用调用 2、获取内容的地方
ViewChild从模板中获取内容
ContentChild需要从ng-content中投影的内容中获取内容,
也就是没有使用ng-content投影就无法获取内容
*/

  

ViewChild与ContentChild的联系和区别的更多相关文章

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

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  2. [Angular] Difference between ViewChild and ContentChild

    *The children element which are located inside of its template of a component are called *view child ...

  3. angular2 学习笔记 ( Component 组件)

    refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...

  4. angular2的模板语法

    Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经 ...

  5. angular 模板语法(官方文档摘录)

    https://angular.cn/guide/template-syntax {{}} 和"" 如果嵌套,{{}}里面求完值,""就是原意 <h3&g ...

  6. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

  7. Angular6 学习笔记——指令

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  8. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  9. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

随机推荐

  1. logback 生成日志

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...

  2. C++遍历目录+_finddata_t结构体用法

    Struct _finddata_t是用来存储文件各种信息的结构体,使用这个结构体要引用的头文件为“ #include <io.h>”它的结构体定义如下: struct _finddata ...

  3. 03004_SQL语句

    1.SQL语法 (1)数据库是不认识JAVA语言的,但是我们同样要与数据库交互,这时需要使用到数据库认识的语言SQL语句,它是数据库的代码: (2)结构化查询语言(Structured Query L ...

  4. 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) A】 Perfect Squares

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] N*1000暴力就好 [代码] #include <bits/stdc++.h> using namespace std ...

  5. android 自己定义View之SubmitView

    转载请注明出处:王亟亟的大牛之路 近期看了一大堆的自己定义View多数都能够充当耗时操作的交互界面.再接再厉再传一个SubmitView.一个和可用于模仿提交等待与用户交互用的一个自己定义View 效 ...

  6. userAgent判断客户端,以及各个浏览器的ua

    userAgent判断客户端,以及各个浏览器的ua http://blog.csdn.net/yoyoosyy/article/details/70142884 navigator.userAgent ...

  7. 关于mybatis里面的Executor--转载

    原文地址:http://blog.csdn.net/w_intercool/article/details/7893344 使用mybatis查寻数据,跟踪其执行流程 最开始执行的语句 this.ge ...

  8. 3/19 Django框架 url路由配置及模板渲染

    3/19 Django框架 url路由配置及模板渲染 1.路由分配 URL(Uniform Resoure Locato):统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...

  9. CISP/CISA 每日一题 三

    CISA 每日一题(答) 测试应用控制的有效性包括: 分析计算机应用程序.测试计算机应用程序控制.选择和监控数据处理事务. 测试应用系统技术: 快照.映射.追踪和标识.测试数据(在真实的系统中的仿真交 ...

  10. 【2017 Multi-University Training Contest - Team 7】Kolakoski

    [Link]:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1011&cid=765 [Description] 有一种 ...