*The children element which are located inside of its template of a component are called *view children *. On the other hand, **elements which are used between the opening and closing tags of the host element of a given component are called *content children **.

ViewChild:

Auth-form.component's template:

    <div>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<ng-content select="auth-remember"></ng-content>
<auth-message></auth-message>
</form>
</div>

Here we can use ViewChild to access <auth-message></auth-message> component, because it is a child component of auth-form component.

ContentChild:

auth-form component:

      <auth-form
(submitted)="loginUser($event)">
<auth-remember
[role]="'checkbox1'"
(checked)="rememberUser($event)">
</auth-remember>
</auth-form>

Notice here <auth-remember> is passed into <auth-form> by content projection.

      <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<ng-content select="auth-remember"></ng-content>
<auth-message></auth-message>
</form>
</div>

So here if we want to access <auth-remeber> inside auth-form component, we have to use @ContentChild.

[Angular] Difference between ViewChild and ContentChild的更多相关文章

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

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

  2. ViewChild与ContentChild的联系和区别

    原文 https://www.jianshu.com/p/5ab619e576ea 大纲 1.认识ViewChild 2.认识ContentChild 3.ViewChild与ContentChild ...

  3. [Angular 2] ElementRef, @ViewChild & Renderer

    ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...

  4. [Angular] Difference between ngAfterViewInit and ngAfterContentInit

    Content is what is passed as children. View is the template of the current component. The view is in ...

  5. [Angular] Difference between Providers and ViewProviders

    For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...

  6. 成为优秀Angular开发者所需要学习的19件事

    一款to-do app基本等同于前端开发的"Hello world".虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已. Angular看起来似乎 ...

  7. angular父组件通过@ViewChild 主动获取子组 件的数据和方法

    1.调用子组件给子组件定义一个名称 <app-footer #footerChild></app-footer> 2. 引入 ViewChild import { Compon ...

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

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

  9. Angular 4+ 修仙之路

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

随机推荐

  1. 纯C++实现的HTTP请求封装(POST/GET)

    纯C++实现的HTTP请求(POST/GET),支持windows和linux, 进行简单的封装, 方便调用.实现如下: #include "HttpConnect.h" #ifd ...

  2. Spark 概念学习系列之Spark 多语言编程

    不多说,直接上干货! Spark 同时支持Scala.Python.Java 三种应用程序API编程接口和编程方式, 考虑到大数据处理的特性,一般会优先使用Scala进行编程,其次是Python,最后 ...

  3. 深度解析VC中的消息

    消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向Windows发出一个通知,告诉应用程序某个事情 ...

  4. 10559 - Blocks(方块消除|DP)

    该题乍一看和矩阵链乘非常类似,但是有一个不同之处就是该题能够拼接 .   为了达到这个目的.我们不得不拓展维度d[i][j][k].用一个k表示最右边拼接了k个和a[j]同样颜色的方块. 问题的关键在 ...

  5. 2016最热门的PHP框架(一共五款)

    摘要: 兄弟连IT教育作为全国最大的PHP培训机构,迄今已有10年的教育历史.6大特色课程:PHP编程.安卓培训.JAVAEE+大数据.UI设计.HTML5培训.云计算架构师,在目前IT市场特别火,每 ...

  6. Ext常用控件

    多选下拉框 var workname = new Ext.form.MultiSelect({ store: pointComboBoxStore, fieldLabel: '工作面', labelS ...

  7. 1.1 Python基础知识 - 变量

    1.什么是变量? 变量是可以通过变量名访问的内存地址,变量通常是可变的. 2.怎样去定义? 变量格式: 变量名 = "变量值" 例如: name = "Zhanghk&q ...

  8. Android 使用JSON格式与服务器交互 中文乱码问题解决

    当前是在开发Android 程序时,客户端与服务器端采用JSON传送数据,发现中文乱码问题.不过这个问题的解决办法应该对所有java语言开发的项目都使用. 解决方法是: 1.客户端发送数据之间加上: ...

  9. CentOS 6 通过DVD快速建立本地YUM源

    一.将DVD光盘放入RedHat/CentOS6.X服务器/电脑光驱中 二.挂载DVD光驱到/mnt/cdrom # mkdir -p /mnt/cdrom # mount -t iso9660 /d ...

  10. 搭建聊天机器人Bot Framework

    Bot Framework 搭建聊天机器人 这周我来跟大家分享的是在Microsoft Build 2016上发布的微软聊天机器人的框架. 现如今,各种人工智能充斥在我们的生活里.最典型的人工智能产品 ...