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

NgOnInit调用了两次

NgOnInit是Angular框架中的一个生命周期钩子函数,用于在组件初始化时执行一些初始化操作。它在组件的构造函数执行完毕后被调用,且只会被调用一次。

然而,有时候我们会发现NgOnInit被调用了两次的情况。这可能是由于以下几种原因导致的:

  1. 组件嵌套:如果一个组件被嵌套在另一个组件中,并且父组件的变化会影响到子组件,那么当父组件发生变化时,子组件的NgOnInit也会被调用。这种情况下,NgOnInit会被调用两次。
  2. 变更检测策略:Angular框架中有几种变更检测策略,如默认的ChangeDetectionStrategy.Default、ChangeDetectionStrategy.OnPush等。如果组件的变更检测策略设置为OnPush,并且组件的输入属性发生变化时,NgOnInit也会被调用。这种情况下,NgOnInit会被调用两次。

解决这个问题的方法有以下几种:

  1. 检查组件的嵌套关系,确保父组件的变化不会影响到子组件,或者适当调整组件的结构,避免嵌套导致的重复调用。
  2. 检查组件的变更检测策略,如果设置为OnPush,可以考虑将其改为Default,或者手动控制变更检测的时机。

总结起来,NgOnInit被调用两次可能是由于组件嵌套或变更检测策略导致的。在实际开发中,我们需要注意这个问题,并根据具体情况采取相应的解决方法。

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

相关·内容

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

ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用。 ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。...它只调用一次ngOnInit。 您可以期待Angular在创建组件后立即调用ngOnInit方法。 这就是深度初始化逻辑所属的地方。...取消注册此指令在全局或应用服务中注册的所有回。 如果你忽视这样做,你会冒内存泄漏的风险。...在用户可以做任何事情之前,在这个例子中它被调用了二十次。 大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发的。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。...回想一下,在调用AfterView钩子之前,Angular调用了AfterContent的两个钩子。 在完成该组件的视图之前,Angular会完成投影内容的组合。

6.1K10

angular面试题及答案_angular面试

首次调用一定发生在ngOnInit前,值得注意的是该方法仅限于对象的引用发生变化时才会触发。...问题就在于请求/响应中消耗了大量时间,或者是重新加载使用了大量时间。而在SPA技术中,即使URL不断变化,我们也只维护一个页面(index.HTML)。 13....Promise是eager的,意思是一旦创建,就会执行 Observable是一个stream,可以传递0,1,或者多个事件,并且为每个事件回。...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angular中OnInit钩子的实现,用来初始化组件。...是输入属性发生变化的时候调用,并且ngOnInit是在ngOnchanges执行之后才调用,而constructor是在组件实例化的时候就调用了,也就是说,在constructor中是取不到输入属性的值的

10.8K120

Angular 自定义属性指令

this.tooltipElement.textContent = value; } constructor( private element: ElementRef ) {} ngOnInit...this.element.nativeElement.classList.add('tooltip-container'); } } 在上面代码中,我们定义了一个输入属性,用于接收用户自定义的提示消息,之后通过调用 DOM API 创建了一个 div 元素,然后在 ngOnInit...要实现这个功能,我们可以监听 span 元素的 mouseover 和 mouseout 事件,在对应的回函数中,控制 tooltip 元素的显示和隐藏。...this.tooltipElement.classList.add('tooltip--active'); } constructor( private element: ElementRef ) {} ngOnInit...this.tooltipElement); this.element.nativeElement.classList.add('tooltip-container'); } } 事实上在 Angular 表单模块中,也大量使用了

2K30

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

DefaultValueAccessor 的写法是如何把 input 控件每次更新值传给回函数的,L52 和 L89);使用 registerOnTouched 方法来注册用户和控件交互时触发的回(...100px}'] }) export class NgxJquerySliderComponent { @ViewChild('location') location; widget; ngOnInit...location') location; @Input() value; @Output() private valueChange = new EventEmitter(); widget; ngOnInit...implements ControlValueAccessor { @ViewChild('location') location; widget; onChange; value; ngOnInit...在registerOnChange 里我们简单保存了对回函数 fn 的引用,回函数是由 formControl 指令传入的(译者注:参考 L85),只要每次 slider 组件值发生改变,就会触发这个回函数

3.7K20

Angular 服务

而是选择在 ngOnInit 生命周期钩子中调用 getHeroes(),之后交由 Angular 处理,它会在构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。...ngOnInit() {  this.getHeroes();} 查看运行效果 刷新浏览器,该应用仍运行的一如既往。 显示英雄列表,并且当你点击某个英雄的名字时显示出英雄详情视图。...它可以使用回函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象)。...然后,subscribe 函数把这个英雄数组传给这个回函数,该函数把英雄数组赋值给组件的 heroes属性。...在组件的 ngOnInit 生命周期钩子中调用 HeroService 方法,而不是构造函数中。 你创建了一个 MessageService,以便在类之间实现松耦合通讯。

3.3K70
领券