angular中ngOnChanges与组件变化检测的关系
1.ngOnChanges只有在输入值改变的时候才会触发,如果输入值(@Input)是一个对象,改变对象内的属性的话是不会触发ngOnChanges的。
2.组件的变化检测:
2a.changeDetection如果是ChangeDetectionStrategy.Default的话,无论输入值(@Input)是否发生变化,都会进行组件自身的变化检测。
2b.changeDetection如果是ChangeDetectionStrategy.OnPush的话,只有在输入值(@Input)发生变化的情况下,才会进行自身的变化检测。
因此OnPush的组件在其内部改变属性值是不会反应在页面上的
@Component({
selector: 'app-movie',
template: `
<div>
<h3>{{ title }}</h3>
<p>
<label>Actor:</label>
<span>{{actor.firstName}} {{actor.lastName}}</span>
</p>
<div>{{test}}</div>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MovieComponent implements OnInit {
@Input() title: string;
@Input() actor: Actor;
test = 'test';
constructor(private cd: ChangeDetectorRef) {}
ngOnInit(): void {
setTimeout(() => {
this.test = 'test1';
this.cd.detectChanges();
}, 1000);
}
}
这种情况要使用ChangeDetectorRef的detectChanges方法手动启用组件的变化检测。
2c.ChangeDetectorRef.detach之后的组件是不会在变化检测周期里自动进行变化检测的,需要手动进行变化检测。
3.组件的DoCheck接口无论什么情况都会在变化检测周期被调用。
以上可知,ngOnChanges与组件是否进行变化检测没有直接关系。
angular中ngOnChanges与组件变化检测的关系的更多相关文章
- Angular中不同的组件间传值与通信的方法
主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- Angular中怎样创建service服务来实现组件之间调用公共方法
Angular组件之间不能互相调用方法,但是可以通过创建服务来实现公共方法的调用. 实现 创建服务命令 ng g service 服务路径/服务名 比如这里在app/services目录下创建stor ...
- Netty中的基本组件及关系
原文:https://blog.csdn.net/summerZBH123/article/details/79344226--------------------- 概述 这篇文章主要是用来 ...
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- angular中父组件给子组件传值-@input
1. 父组件调用子组件的时候传入数据 <app-header [msg]="msg"></app-header> 2. 子组件引入 Input 模块 imp ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- Angular中ViewChild\ngAfterViewInit\Promise的使用,在父组件初始化时等待子组件的返回值
1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
随机推荐
- npm 配置
设置代理 $ npm config set proxy http://server:port $ npm config set https-proxy https://server:port 如果代理 ...
- React+Three.js——PerspectiveCamera透视相机camera参数以及属性值探索
因项目问题,对webgl进行了探索,当进行到3d相机时,对camera的up,position属性有部分难以理解的地方,因此做下了记录. 代码如下: import React, {Component} ...
- Hosts文件说明
Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Host ...
- 【读书笔记】读《编写可维护的JavaScript》 - 编程实践(第二部分)
本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事 ...
- sqlserver 自增ID插入指定数据(转)
set identity_insert 表名 ON --允许对自增列Id插入指定数据 insert into table_name(Id,Name) values(1,'test') set iden ...
- springmvc + spring + ibatis + mysql
1.spring mvc 官网下载:https://repo.spring.io/webapp/#/artifacts/browse/simple/General/libs-release-local ...
- 一:HttpClient知识整理
一:httpclient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支 ...
- Apache2.4+PHP7.3 安装及整合教程[Windows]
系统环境:Win10 64位 Apache版本:2.4.37 64位 PHP版本:7.3.1 64位 下载 安装的第一步肯定是下载了,可以直接到我的网盘(密码:18tp)下载,下载完成后将文件解压到你 ...
- UVA1339(字母映射)
memcmp(const void *buf1, const void *buf2, unsigned int count)可以比较两个串相等 http://baike.baidu.com/link? ...
- Git错误解决(windows版本下的Git Shell)
第一个问题:怎么也不能将自己本地仓库代码pull到GitHub网站上? git push origin master Warning: Permanently added 'github.com,19 ...