问题标签 [angular-lifecycle-hooks]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
23 浏览

arrays - 显示从 http 调用 Angular 检索到的更新数据

我正在将包含嵌套数组的数据响应中的数据推送到组件中的静态数据数组中。

以编程方式将数据正确推送到对象中。我在浏览该方法时看到了这一点,并看到我的 for 循环成功地将项目添加到已经存在的数组中。正在添加“OnInit”

在我看来,这根本不是将项目添加到表格中。

我怀疑这与生命周期钩子有关。

0 投票
1 回答
482 浏览

angular - 在 ngAfterViewInit 生命钩子上返回 Angular 9 不正确的元素高度

我正在尝试在 ngAfterViewInit 生命钩子上获取标题的高度。Chrome 说高度是 172 像素(这是正确的),但我的代码说高度是 142 像素(有时是 140 像素)。

头组件.ts

应用组件.html

appcomponent.ts 中没有代码。只是普通的组件类。

0 投票
1 回答
249 浏览

angular - ngOnchanges 和 DoCheck 角度

在研究 Angular 中 ngOnChanges 和 DoCheck 之间的区别时,我看到了一些我无法解释的东西,需要你的帮助。

基本上,我知道 ngOnChanges 无法识别数组或对象的变化,而 DoCheck 可以。我在这里创建了 stackblitz:https ://stackblitz.com/edit/angular-ivy-sbyzya?file=src/app/app.component.html

在 app.component.html 中

  • 如果您注释第 2 行,那么只有 ngOnChanges 运行的组件,单击添加或编辑时数据没有排序。没错,因为 OnChange 无法检测到数组@Input 的变化。
  • 如果您注释第 1 行,那么只有 DoCheck 运行的组件,单击添加或编辑时数据排序。没错,因为DoCheck可以检测到数组@Input的变化。
  • 但是如果你让两个子组件都运行,当点击添加或编辑时,两个子组件中的数据都会被排序。这对我来说似乎很奇怪,因为我不明白为什么 DataTableOnchangeComponent 可以运行排序功能。我在 ngOnChanges 中进行了排序,单击添加或编辑时未触发 ngOnChanges,但不知何故数据仍然得到排序。
0 投票
3 回答
121 浏览

jquery - jquery在Angular中路由时找不到项目

我在内部运行的角度组件中有以下代码ngOnInit()

我添加了,$(document).ready因为它以前不起作用。现在它适用于页面加载。但是当我做路由时它没有。我知道脚本正在运行,并且打印出“文档内的动画技能栏已准备就绪”。所以出于某种原因,问题是$(".skillbars").each()

为什么这不起作用?我觉得好像skillbars还没有准备好,但那是document.ready正确的目标?

0 投票
0 回答
26 浏览

angular8 - “无法读取未定义的属性'组件'”,同时通过 Angular 8 中的 params.context 从另一个组件调用一个组件的方法

我正在尝试从 ChildMessageRenderer 调用 SecComponent 的方法。@ViewChild 在控制台中出现错误。有人可以帮助解决这个问题吗? 在此处输入图像描述 在此处输入图像描述

0 投票
1 回答
538 浏览

angular - Ionic Angular 路由器组件缓存问题

目前,我正在使用 Angular 9(单页应用程序)开发 Ionic 5 应用程序,并且在路由/组件缓存方面遇到了一些问题(至少我是这么认为的),需要一些帮助。我将尽我所能解释我的情况,以便您了解我正在与之斗争的概念和问题。

我有一页上有 2 个<ion-tab-bar>控件/选项卡(活动和非活动)。在“活动”选项卡上,我列出了我的数据库中在数据库中设置了“活动”标志的产品,而在“非活动”上,我列出了相反的产品。在这些选项卡上,产品以面向列表的方式显示,样式为卡片/卡片组件。

单击卡片后,我将用户导航到显示产品详细信息的新页面 (/active/:id)。除其他功能外,还有一个将产品标记为非活动状态的按钮。通过单击此按钮,我正在进行 api 调用,它将产品在数据库中标记为非活动。此外,此页面包含一个<ion-back-button>按钮组件,可让我回到上一页。

问题

我的问题是,当我将产品标记为非活动时,它会更改其在数据库中的状态,但是当我单击后退按钮并返回活动选项卡时,我标记为非活动的产品仍在活动选项卡下,我注意到没有调用任何生命周期方法,也没有执行 api 调用以刷新列表。

在此之后,当我转到非活动选项卡时,现在我的产品显示在此处,当我再次切换到活动选项卡时,它不再位于活动选项卡下,这是我最初所期望的。

这种行为不仅在我浏览后退按钮时发生,而且在我浏览标题导航时也会发生(因此,我认为这与从位置历史中呈现页面无关)。

我在下面发布了一张图片,它在视觉上代表了这个问题。

任何建议/指南将不胜感激。提前致谢。

在此处输入图像描述

0 投票
1 回答
39 浏览

angular - Angular 指令查询同级 HTML

使用 Angular 10 我想查询兄弟元素。基本上我有这样的东西:

myDirective我可以很容易地得到forvia a的值@HostBinding。然后,在我的指令中,我想获取formControlName具有给定 ID 的元素。例如,我不知道该怎么做,因为我的指令似乎可能在创建输入元素之前运行。

我正在尝试自动化一点,所以我不必写这个:

0 投票
0 回答
184 浏览

angular - Angular 8 生命周期钩子性能问题

我正在开发一个 Angular 应用程序,该应用程序具有一系列具有相互依赖的值的输入字段 i:ea 很多字段值是早期组件字段值的百分比。

我有一个函数setPercentages()用于计算不同字段的值,在我的反应式表单元素上调用 patchValue({}) 并将值分配给字段组件。

我的麻烦是 setPercentages() 是从 ngAfterViewChecked() 生命周期挂钩中调用的。虽然它有效,但我很快开始注意到(1)任何具有分配值的组件都不再可编辑,(2)它似乎减慢了应用程序甚至我的计算机的速度,因为钩子总是在触发。

因此,在下图中,请注意控制台区域中的 ngAfterViewChecked 在不到一分钟的时间内触发了超过 4k 次。在右侧,存款值组件不断重置为从 ngAfterViewChecked 挂钩返回的计算值。

在此处输入图像描述

由于我对 Angular 有点陌生,我正在寻找有关如何最好地可靠地更新我的文本字段中的数字以响应相邻字段组件的更改的建议。虽然 ngAfterViewChecked 确实允许我这样做,但对性能的影响是极端的。

0 投票
2 回答
317 浏览

css - 查看初始化后的角度设置变量

情况: 目前我的网站上有两个选项卡,都包含一个文本。文本有一个固定的高度,内容溢出不显示(溢出:隐藏)。

问题: 如果我的文本溢出,我想添加三个点(图标)。为了检测是否发生溢出,我使用以下表达式,它完美地工作并在发生溢出时添加一个 expandButton。

问题是,我不知道我应该在哪里检查我的内容是否溢出,因为我在两个不同的位置(这里:标签)使用了这个语句。

如果我选择 ngAfterViewInit,如果我的内容在第一个选项卡上溢出,则 const overflown 将设置为 true。但不在第二个选项卡上(如果内容也溢出)。这样做的原因是,视图仅在第一个选项卡上呈现,而不在第二个选项卡上呈现。因此,如果我切换到第二个选项卡,ngAfterViewInit 将不会触发。

我也尝试使用其他生命周期钩子,但它们都不适合我。

我想也许关于 ngAfterContentInit 并使用变量来检测是否第一次调用 ngAfterContentInit ,但这对我也不起作用。

先感谢您。

解决方案 我禁用了这个组件的延迟加载并解决了这个问题。

0 投票
1 回答
309 浏览

javascript - 在 ngAfterViewInit 生命周期中,dom 的钩子图像被完全加载了吗?

所以在我目前的项目中,我正在尝试创建一个产品滑块。为了正常工作,我需要获取所有产品的宽度,以便计算总宽度。目前我正在做的是

在调用我的后端并将其设置为本地变量后的 ngAfterViewInit 中,我手动运行更改检测。之后,如果我进行控制台日志记录,我将获取节点列表,其中所有项目都具有正确的宽度。但是如果我尝试遍历节点列表以获取totalwidth 我得到不同的值。在每张卡片中,我当前显示一个图像和一个文本。我没有将卡片的宽度设置为固定值,我将图像的高度设置为固定值应用与该高度相对应的宽度,所以图像会响应。所以我在节点列表上的循环给了我错误的宽度值,直到图像是从内存缓存中加载的。所以我的猜测是加载图像需要一定的时间,我的卡的宽度取决于图像宽度,这就是为什么如果我尝试遍历节点列表,我会得到错误的宽度值。但是,为什么节点列表中的宽度值是正确的,以及为什么我尝试遍历它们时它会改变?我应该如何解决这个问题,以便在我的组件在不使用的情况下加载后立即根据每个卡的宽度获得总宽度setTimeOut().

这是演示 stackblitz 代码 - https://stackblitz.com/edit/angular-ivy-czs5mo?file=src/app/app.component.ts