[Angular] Difference between ViewChild and ContentChild
Angular and between Difference
2023-09-14 09:00:52 时间
*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-datetime-picker 格式
- Angular HTTPClient API 在 SAP 电商云中的使用
- 前端人员该怎么面试 经典Angular面试题有哪些[通俗易懂]
- angular基础面试题_java web面试题
- vue相比jquery_angular和vue哪个厉害
- angular 路由懒加载_angular路由
- 解决angular创建项目报错:setTimeout is not defined
- 关于 Angular 应用的入口
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- Angular Universal Application 应该处理 HTTP POST 请求吗?
- Angular Universal 应用避免 SSR hang 的一些指导方针
- angular框架发展史
- Angular 应用开发里使用 ForRoot 解决 Lazy Loaded Module 里单例行为丢失的问题
- 【Angular教程】-组件通信|8月更文挑战
- 【Angular教程】组件动效u002F动态组件u002F视图封装模式
- Angular Feature Modules
- Angular 项目多国语言设置
- Angular SSR 应用启动时的一些保护措施
- 关于 Angular 应用的 Bootstrap 过程
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- 多条件查询MySQL中使用And多条件查询的步骤(mysql中and)
- Angular 6.0 即将发布 承诺更小更快更易用
- 深入浅出:MySQL中AND和OR运算符使用方法(mysql中and和or)
- MySQL中AND的使用方法解析(mysql中and的用法)