[Angular] Difference between ViewChild and ContentChild
*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的更多相关文章
- Angular6 学习笔记——内容投影, ViewChild和ContentChild
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- ViewChild与ContentChild的联系和区别
原文 https://www.jianshu.com/p/5ab619e576ea 大纲 1.认识ViewChild 2.认识ContentChild 3.ViewChild与ContentChild ...
- [Angular 2] ElementRef, @ViewChild & Renderer
ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...
- [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 ...
- [Angular] Difference between Providers and ViewProviders
For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...
- 成为优秀Angular开发者所需要学习的19件事
一款to-do app基本等同于前端开发的"Hello world".虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已. Angular看起来似乎 ...
- angular父组件通过@ViewChild 主动获取子组 件的数据和方法
1.调用子组件给子组件定义一个名称 <app-footer #footerChild></app-footer> 2. 引入 ViewChild import { Compon ...
- angular 模板语法(官方文档摘录)
https://angular.cn/guide/template-syntax {{}} 和"" 如果嵌套,{{}}里面求完值,""就是原意 <h3&g ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
随机推荐
- 纯C++实现的HTTP请求封装(POST/GET)
纯C++实现的HTTP请求(POST/GET),支持windows和linux, 进行简单的封装, 方便调用.实现如下: #include "HttpConnect.h" #ifd ...
- Spark 概念学习系列之Spark 多语言编程
不多说,直接上干货! Spark 同时支持Scala.Python.Java 三种应用程序API编程接口和编程方式, 考虑到大数据处理的特性,一般会优先使用Scala进行编程,其次是Python,最后 ...
- 深度解析VC中的消息
消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向Windows发出一个通知,告诉应用程序某个事情 ...
- 10559 - Blocks(方块消除|DP)
该题乍一看和矩阵链乘非常类似,但是有一个不同之处就是该题能够拼接 . 为了达到这个目的.我们不得不拓展维度d[i][j][k].用一个k表示最右边拼接了k个和a[j]同样颜色的方块. 问题的关键在 ...
- 2016最热门的PHP框架(一共五款)
摘要: 兄弟连IT教育作为全国最大的PHP培训机构,迄今已有10年的教育历史.6大特色课程:PHP编程.安卓培训.JAVAEE+大数据.UI设计.HTML5培训.云计算架构师,在目前IT市场特别火,每 ...
- Ext常用控件
多选下拉框 var workname = new Ext.form.MultiSelect({ store: pointComboBoxStore, fieldLabel: '工作面', labelS ...
- 1.1 Python基础知识 - 变量
1.什么是变量? 变量是可以通过变量名访问的内存地址,变量通常是可变的. 2.怎样去定义? 变量格式: 变量名 = "变量值" 例如: name = "Zhanghk&q ...
- Android 使用JSON格式与服务器交互 中文乱码问题解决
当前是在开发Android 程序时,客户端与服务器端采用JSON传送数据,发现中文乱码问题.不过这个问题的解决办法应该对所有java语言开发的项目都使用. 解决方法是: 1.客户端发送数据之间加上: ...
- CentOS 6 通过DVD快速建立本地YUM源
一.将DVD光盘放入RedHat/CentOS6.X服务器/电脑光驱中 二.挂载DVD光驱到/mnt/cdrom # mkdir -p /mnt/cdrom # mount -t iso9660 /d ...
- 搭建聊天机器人Bot Framework
Bot Framework 搭建聊天机器人 这周我来跟大家分享的是在Microsoft Build 2016上发布的微软聊天机器人的框架. 现如今,各种人工智能充斥在我们的生活里.最典型的人工智能产品 ...