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与组件变化检测的关系的更多相关文章

  1. Angular中不同的组件间传值与通信的方法

    主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...

  2. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  3. Angular中怎样创建service服务来实现组件之间调用公共方法

    Angular组件之间不能互相调用方法,但是可以通过创建服务来实现公共方法的调用. 实现 创建服务命令 ng g service 服务路径/服务名 比如这里在app/services目录下创建stor ...

  4. Netty中的基本组件及关系

    原文:https://blog.csdn.net/summerZBH123/article/details/79344226---------------------  概述    这篇文章主要是用来 ...

  5. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  6. angular中父组件给子组件传值-@input

    1. 父组件调用子组件的时候传入数据 <app-header [msg]="msg"></app-header> 2. 子组件引入 Input 模块 imp ...

  7. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

  8. Angular中ViewChild\ngAfterViewInit\Promise的使用,在父组件初始化时等待子组件的返回值

    1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...

  9. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

随机推荐

  1. 兼容IE6-9,FF,Chrome的box-shadow效果(纯CSS)

    昨天由于工作关系,遇上了这个问题,苦恼一日无解——残念. 所幸终于在今天早上得到了解决,遗憾的是灵活性不够强,不能根据内容自适应,要配合JS才能达到自适应效果 不过总结到这里已经很满意了,毕竟规律已经 ...

  2. css3毛玻璃效果白边问题

    注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...

  3. Java入门系列-23-NIO(使用缓冲区和通道对文件操作)

    NIO 是什么 java.nio全称java non-blocking(非阻塞) IO(实际上是 new io),是指jdk1.4 及以上版本里提供的新api(New IO) ,为所有的原始类型(bo ...

  4. Selenium库简介

    Selenium是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaScript动态渲染的页面来说 ...

  5. java.lang.NumberFormatException: For input string: "1" at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65) at java.lang.Integer.parseInt(Integer.java:580) at java.lang

    java.lang.NumberFormatException: For input string: "1" at java.lang.NumberFormatException ...

  6. Firebird Case-Insensitive Searching 大小写不敏感查找

    Firebird 默认是大小写敏感,在检索的时候. 要想不敏感检索,两种方法: 1.where upper(name) = upper(:flt_name) 2.检索时指定字符集collation,例 ...

  7. PHP学习3——数组

    主要内容: 简介 常用的方法 循环遍历数组 PHP预定义数组 数组的处理函数 数组 PHP由于是弱类型的语言,他的变量类型是可以自由变换的,他的数组很自由,长度是可以动态增加的. 他的索引默认为数字0 ...

  8. C#基础知识-使用XML完成一个小程序(十一)

    上一篇中讲到XML基本的结构,还有增删改查的方法,这一篇中我们就来利用XML来完成一个简单的订单系统,主要是实现一个简单学生名单的增删改查,如果想要应用到实际的环境中建议考虑数据量的问题,如果数据量大 ...

  9. Consul 遇到的坑

    均衡负载时调用的地址 spring.cloud.consul.discovery.service-name= 当A服务调用B服务时,可以转发到注册中心进行转发调用, 应该使用这个地址,这一点和eure ...

  10. php发送邮件功能(PHPMailer-master插件)

    当作一个插件使用即可,放到网站根目录,然后调用里面的mail.php 源码