我们可以在 ngAfterViewInit() 而不是 ngOnInIt() 中设置输入属性吗?
Can we set the input properties in ngAfterViewInit() instead of ngOnInIt()?
一般在组件初始化时,ngOnInit()用于设置输入属性。同样,我们可以在 ngAfterViewInit() 而不是 ngOnInit() 中设置相同的输入属性吗?我们可以在 ngAfterViewInit() 上实现我们通常在 ngOnInit() 下执行的所有这些操作吗?
上面的问题是面试问的,想了解下能不能实现
如果Yes/No,你能举例说明吗?
谢谢。
在一些边际(并且不是很有用)的情况下,Angular lifehooks 可以用来执行相同的操作,但它们主要用于控制和处理不同的操作。
这里不讨论 lifehooks 的细节,但是 ngOnInit
在 ngAfterViewInit
之前被触发:所以它可以(并且应该)用于处理 的属性和操作组件的 content 和 view 稍后可能取决于 - 例如设置初始值(未在构造函数中设置或作为 class 成员)或订阅服务等
另一方面,ngAfterViewInit
将在组件的视图完全 loaded/populated 时触发,因此它将在所有 child 组件和查看 指令 已加载。因此,ngAfterViewInit
生命挂钩是处理视图元素所依赖或视图元素提供给组件的操作和属性的地方。例如,如果需要对 DOM 个元素(在 ngOnInit
触发时未初始化)进行操作: access/alter css 属性,计算一些宽度, heights, offsets, 处理加载子组件的变量等
要记住的另一个重要区别是 - 当您使用您的应用程序、浏览页面等时 - 各个组件的 ngOnInit
只会触发一次(如果它随后没有被销毁,它将允许它 re-initialize),当组件初始化时,但是 ngAfterViewInit
将在您每次返回该组件时触发(当它 re-renders 视图时)。因此,ngAfterViewInit
也是处理与 re-rendering 视图相关的操作的好地方,例如每次用户打开该页面时处理后台随机图像的加载。
在决定将操作放在哪里时,应该知道 确切地 为什么 he/she 在给定的救生圈而不是另一个中这样做 - 以及为什么和如何影响应用程序的生命周期。
例如,如果您的查看内容取决于您从 API 订阅中获得的某些数据,您 可以 在您的 ngAfterViewInit
中订阅该服务(并稍后取消订阅!),但缺点是您的视图将在 在您的订阅响应出现之前 呈现 - 因为当视图已经存在时会触发此 lifehook。如果您没有在处理视图元素时牢记 time-difference,您的视图可能无法按预期工作,甚至可能因错误而中断。
一般来说,由于 ngAfterViewInit
在 ngOnInit
之后,您(通常)可以很安全地使用 ngOnInit
来处理视图元素将依赖的操作(只是不要尝试访问它们 - 它们还不存在)。
简而言之:如果你处理好你的视图,你可以将 一些(主要用于)ngOnInit
操作放入 ngAfterViewInit
,但是您需要一个充分的理由并考虑功能。将这些 lifehook 和它们的逻辑分开并使用它们来处理它们预期的操作要安全得多。
一般在组件初始化时,ngOnInit()用于设置输入属性。同样,我们可以在 ngAfterViewInit() 而不是 ngOnInit() 中设置相同的输入属性吗?我们可以在 ngAfterViewInit() 上实现我们通常在 ngOnInit() 下执行的所有这些操作吗?
上面的问题是面试问的,想了解下能不能实现
如果Yes/No,你能举例说明吗?
谢谢。
在一些边际(并且不是很有用)的情况下,Angular lifehooks 可以用来执行相同的操作,但它们主要用于控制和处理不同的操作。
这里不讨论 lifehooks 的细节,但是 ngOnInit
在 ngAfterViewInit
之前被触发:所以它可以(并且应该)用于处理 的属性和操作组件的 content 和 view 稍后可能取决于 - 例如设置初始值(未在构造函数中设置或作为 class 成员)或订阅服务等
另一方面,ngAfterViewInit
将在组件的视图完全 loaded/populated 时触发,因此它将在所有 child 组件和查看 指令 已加载。因此,ngAfterViewInit
生命挂钩是处理视图元素所依赖或视图元素提供给组件的操作和属性的地方。例如,如果需要对 DOM 个元素(在 ngOnInit
触发时未初始化)进行操作: access/alter css 属性,计算一些宽度, heights, offsets, 处理加载子组件的变量等
要记住的另一个重要区别是 - 当您使用您的应用程序、浏览页面等时 - 各个组件的 ngOnInit
只会触发一次(如果它随后没有被销毁,它将允许它 re-initialize),当组件初始化时,但是 ngAfterViewInit
将在您每次返回该组件时触发(当它 re-renders 视图时)。因此,ngAfterViewInit
也是处理与 re-rendering 视图相关的操作的好地方,例如每次用户打开该页面时处理后台随机图像的加载。
在决定将操作放在哪里时,应该知道 确切地 为什么 he/she 在给定的救生圈而不是另一个中这样做 - 以及为什么和如何影响应用程序的生命周期。
例如,如果您的查看内容取决于您从 API 订阅中获得的某些数据,您 可以 在您的 ngAfterViewInit
中订阅该服务(并稍后取消订阅!),但缺点是您的视图将在 在您的订阅响应出现之前 呈现 - 因为当视图已经存在时会触发此 lifehook。如果您没有在处理视图元素时牢记 time-difference,您的视图可能无法按预期工作,甚至可能因错误而中断。
一般来说,由于 ngAfterViewInit
在 ngOnInit
之后,您(通常)可以很安全地使用 ngOnInit
来处理视图元素将依赖的操作(只是不要尝试访问它们 - 它们还不存在)。
简而言之:如果你处理好你的视图,你可以将 一些(主要用于)ngOnInit
操作放入 ngAfterViewInit
,但是您需要一个充分的理由并考虑功能。将这些 lifehook 和它们的逻辑分开并使用它们来处理它们预期的操作要安全得多。