首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular 6- ngOnChanges不为嵌套数组触发

Angular 6中的ngOnChanges是一个生命周期钩子函数,用于在组件的输入属性发生变化时执行特定的操作。然而,ngOnChanges不会为嵌套数组触发。

具体来说,当组件的输入属性发生变化时,Angular会检测这些变化,并调用ngOnChanges方法。ngOnChanges方法接收一个SimpleChanges对象作为参数,该对象包含了所有输入属性的变化信息。

然而,ngOnChanges只会检测输入属性的引用是否发生了变化,而不会深度检测嵌套数组的内容是否发生了变化。这意味着,如果一个嵌套数组的内容发生了变化,但其引用没有变化,ngOnChanges方法将不会被触发。

为了解决这个问题,可以使用Angular提供的ChangeDetectorRef服务手动触发变化检测。在ngOnChanges方法中,可以调用ChangeDetectorRef的detectChanges方法来强制执行变化检测,从而确保嵌套数组的变化能够被捕获。

以下是一个示例代码:

代码语言:txt
复制
import { Component, Input, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div *ngFor="let item of nestedArray">
      {{ item }}
    </div>
  `
})
export class ExampleComponent implements OnChanges {
  @Input() nestedArray: any[];

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes['nestedArray']) {
      this.cdr.detectChanges();
    }
  }
}

在上述示例中,我们注入了ChangeDetectorRef服务,并在ngOnChanges方法中调用了detectChanges方法。这样,无论嵌套数组的引用是否发生变化,都能够触发变化检测。

需要注意的是,手动触发变化检测可能会导致性能问题,因此应该谨慎使用。如果嵌套数组的变化频率较高,可以考虑使用Immutable.js等工具来确保引用的变化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular constructor vs ngOnInit

Angular 学习过程中,相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑,本文我们会通过实际的例子,为读者一步步解开困惑。...组件生命周期中的一个钩子,Angular 中的所有钩子和调用顺序如下: ngOnChanges —— 当数据绑定输入属性的值发生变化时调用 ngOnInit —— 在第一次 ngOnChanges 后调用...获取输入属性后初始化组件,该钩子方法会在第一次 ngOnChanges 之后被调用。...因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后在调用 ngOnInit 钩子方法,所以在...constructor 应用场景 在 Angular 中,构造函数一般用于依赖注入或执行一些简单的初始化操作。

1.4K20

AngularDart 4.0 高级-生命周期钩子 顶

生命周期序列 通过调用其构造函数创建组件/指令后,Angular在特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...ngOnChanges方法是您第一次访问这些属性的机会。 在ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。 它只调用一次ngOnInit。...大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发的。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。 相对较少的调用显示相关数据的实际变化。...Angular的单向数据流规则禁止在视图组成之后更新视图。 组件视图组合完成后,这两个钩子都会触发。 如果钩子立即更新组件的数据绑定comment属性,Angular会抛出一个错误(尝试它!)。

6.1K10

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

formControl 指令使用 writeValue 方法设置原生表单控件的值(译者注:你可能会参考 L186 和 L41);使用 registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数...DefaultValueAccessor 的写法是如何把 input 控件每次更新值传给回调函数的,L52 和 L89);使用 registerOnTouched 方法来注册用户和控件交互时触发的回调(...ngOnChanges(changes: SimpleChanges): void { if (this....当然我们也可以使用 ngOnChanges 生命周期钩子来追踪输入属性 value 值的变化,一旦其值变化,我们就将该值设置为 slider 控件的值。...在registerOnChange 里我们简单保存了对回调函数 fn 的引用,回调函数是由 formControl 指令传入的(译者注:参考 L85),只要每次 slider 组件值发生改变,就会触发这个回调函数

3.7K20

Angular学习笔记(一)

架构 模块 Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块 或 NgModules。...providers - 组件所需服务的依赖注入提供商数组。 数据绑定 Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。...生命周期 ngOnChanges() 当 Angular 重新设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...在每个 Angular 变更检测周期中调用,ngOnChanges() 和 ngOnInit() 之后。 ngAfterContentInit() 当把内容投影进组件之后调用。

3.3K20

【17】进大厂必须掌握的面试题-50个Angular面试

Angular是否支持嵌套控制器? 是的,Angular确实支持嵌套控制器的概念。需要以层次方式定义嵌套控制器,以便在视图中使用它。 17.如何区分Angular表达式和JavaScript表达式?...通常,此过程是隐式触发的,但是您也可以使用$ apply()手动将其激活。 25.什么是Angular模块? 所有Angular应用程序都是模块化的,并遵循称为NgModules的模块化系统。...filter: 从数组中选择项的子集。 json: 将对象格式化为JSON字符串。 limit:将数组/字符串限制为指定数量的元素/字符。 小写: 将字符串格式化为小写。...orderBy: 按表达式对数组排序。 大写: 将字符串格式化为大写。 28.什么是Angular中的依赖注入?...ngOnChanges:每当组件的任何输入属性发生更改或更新时,都将调用它。 ngOnInit:每次初始化给定组件时都会调用它。

41.1K51

前端三大主流框架的区别(二)

比如遍历直接在jsx中使用map,判断用if等原生js的方法 angular 中的指令,比如:*ngIf *ngFor *ngSwitchCase 模板语法 vue 采用双花括号{{}}绑定数据 react...采用单花括号{}绑定数据 angular 采用双花括号{{}}绑定数据 组件 vue 中使用Vue.component定义或者直接在项目中一般使用以.vue结尾的单文件组件。...angular 中的组件是以.html、css、js三个文件共同来组成的,使用@Component装饰器来组合。组件的创建形式是通过命令构建自动生成基于TypeScript的类生成的组件。...ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked...angular 中可以和react一样,在构造函数中定义数组状态,也可以直接定义为累的属性,和构造函数平级,一般放到构造函数上面:todolist: any[] = [];,修改数据的时候和vue类似,

57230

Angular开发实践(四):组件之间的交互

Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。...因此在ngOnChanges方法中通过遍历changes对象可监视多个输入属性值并进行相应的操作。...; this.paramTwo = demoParent.paramTwoVal; } } 未知父组件的类型 一个组件可能是多个组件的子组件,有时候无法直接知道父组件的类型,在Angular...} 通过服务传递 Angular的服务可以在模块注入或者组件注入(均通过providers注入)。 在模块中注入的服务在整个Angular应用都可以访问(除惰性加载的模块)。...然后通过DemoParentComponent的providers元数据数组提供CallService服务的实例,并通过构造函数分别注入到父子组件中。

3.3K80

angular面试题及答案_angular面试

生命周期钩子 生命周期的顺序,见下图: ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该方法接收一个SimpleChanges对象,包括当前值和上一个属性值。...首次调用一定发生在ngOnInit前,值得注意的是该方法仅限于对象的引用发生变化时才会触发。...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...是输入属性发生变化的时候调用,并且ngOnInit是在ngOnchanges执行之后才调用,而constructor是在组件实例化的时候就调用了,也就是说,在constructor中是取不到输入属性的值的...Angular的核心部件有哪些?

10.9K120

angular基础面试题_java web面试题

angular 生命周期的顺序 ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。...输出给父组件 @Output EventEmitter somethingChanged.emit(value)也叫事件发射器 触发父组件值得改变 子组件接收值用的@input 组件样式 ViewEncapsulation.Native...watch,当浏览器接受到可以被angular context(当事件触发,调用apply进入angular context)处理的事件时,就会触发digest循环,它会遍历每一个watch检查其属性和值是否发生改变...如果此次digest循环有更新,那么会再次触发digest循环,直到所有的watch都没有更新为止。 使用Angular 2,和使用Angular 1相比,有什么优势?...通过限制api,选择使用已知或安全环境/浏览器的app来防止XSRF攻击、 Angular变化监测 : event:绑定event事件,数据变化视图更新 timeout,延迟触发 版权声明:本文内容由互联网用户自发贡献

13K50

浅谈Hooks&&生命周期(2019-03-12)

生命周期 现在流行的前端框架,无论是angular还是React,又或是Angular2以及以上,都由框架自身提供了生命周期(有的叫生命周期钩子)供开发者使用。...Vue-lifecycle Angular生命周期: Hook Purpose and Timing ngOnChanges() Angular(重新)设置数据绑定输入属性时的响应。...ngOnChanges() ngDoCheck() 检测Angular无法或不会自行检测的更改并对其进行操作。在每次更改检测运行期间,在ngOnChanges()和之后立即调用ngOnInit()。...ngOnDestroy() 就在Angular破坏指令/组件之前进行清理。取消订阅Observable并分离事件处理程序以避免内存泄漏。在 Angular破坏指令/组件之前 调用。...useEffect useContext 1.1 useState 看例子 - hooksdemo 进去就调用了useState, 传入 0,对state 进行初始化,此时count 就是0, 返回一个数组

3.2K40
领券