[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 ...
随机推荐
- 数学定理证明机械化的中国学派(II)
所谓"学派"是指:存在一帮人,具有同样或接近的学术观点或学术立场,採用某种特定的"方法"(或途径),在一个学术方向上共同开展工作.而且做出了相当有迎影响的学术成 ...
- 文件上传流式处理commons-fileupload
1. 从请求中获取MultipartFile @RequestMapping(value="/upload", method=RequestMethod.POST) public ...
- JQuery 当点击input后,单选多选的选中状态
1.当点击input元素,此元素的选中checked的值 = 此元素此时表现的选中与否的状态. eg:input元素开始是未选中,点击后表现的是选中状态,此元素的checked为true(和此元素开始 ...
- 洛谷 P2790 ccj与zrz之积木问题
P2790 ccj与zrz之积木问题 题目背景 ccj和zrz无聊到了玩起了搭积木...(本题选自uva101,翻译来自<算法竞赛入门经典2>) 题目描述 从左到右有n个木块,编号从0到n ...
- Project Euler 501 Eight Divisors (数论)
题目链接: https://projecteuler.net/problem=501 题意: \(f(n)\) be the count of numbers not exceeding \(n\) ...
- PythonAdvanced
PythonAdvanced function 函数 (要多使用函数,方便,少变量,好改错) 函数是可以重复执行的语句块,可以重复使用 作用: 1.用于封装语句块,提高代码的重用性 2.定义用户级别的 ...
- 全选或者单选checkbox的值动态添加到div
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- windows SID
显示SID whoami /user 修改SID C:\windows\system32\sysprep\sysprep.exe /generalize /oobe /reboot
- 7、基于嵌入式Linux的视频采集系统---UVC驱动模型介绍
UVC 即 usb video class.USB协议中,除了通用的软硬件电气接口规范等,还包含了各种各样的Class协议,用来为不同的功能定义各自的标准接口和具体的总线上的数据交互格式和内容.这些C ...
- OCulus Rift 游戏开发六原则
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/46685477 作者:car ...