*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. oracle学习之路(二)------数组类型/记录类型的使用

    Oracle记录类型介绍 RECORD:用户自己定义数据类型,由单行多列的标量构成的复合数据类型.它将一个或多个标量封装成一个对象进行操作记录不能够总体拿来比較也不能够总体推断为空.能够总体拿来赋值. ...

  2. elasticsearch cluster 详解

    上一篇通过clusterservice对cluster做了一个简单的概述, 应该能够给大家一个初步认识.本篇将对cluster的代码组成进行详细分析,力求能够对cluster做一个更清晰的描述.clu ...

  3. 24.C语言最全排序方法小结(不断更新)

    希尔排序: 该方法的基本思想是:先将整个待排元素序列切割成若干个子序列(由相隔某个“增量”的元素组成的)分别进行直接插入排序,然后依次缩减增量再进行排序,待整个序列中的元素基本有序(增量足够小)时,再 ...

  4. 84.setlocale

    用法示例 #include <Windows.h> #include <stdio.h> #include<locale.h> void main() { //se ...

  5. [Angular] Implement a custom form component by using control value accessor

    We have a form component: <label> <h3>Type</h3> <workout-type formControlName=& ...

  6. [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service

    Which hash algorithom to choose for new application: https://www.owasp.org/index.php/Password_Storag ...

  7. 例说linux内核与应用数据通信(一):加入一个系统调用

    [版权声明:尊重原创.转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途]         应用不能訪问内核的内存空间.为了应用和内核交互信息,内核提供一 ...

  8. iOS_05_变量的内存分析、Scanf函数

    一.变量的内存分析 1.字节和地址 * 为了更好地理解变量在内存中得存储细节,先来认识一下内存中得”字节“和”地址“. * 内存以字节为单位 * 不同类型占用的字节是不一样的,数据越大,所需的字节数九 ...

  9. Maven 异常:Project configuration is not up-to-date with pom.xml解决方案

    一.异常信息: 导入maven工程后,出现如下错误: Description    Resource    Path    Location    TypeProject configuration ...

  10. Redis 哨兵(sentinel)模式集群配置(5.0.3版本)

    一.准备工作 1.系统环境:centos6.4 2.服务器六台(1主5从): 192.168.1.161(master) 192.168.1.162(slave) 192.168.1.163(slav ...