问题标签 [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 回答
234 浏览

angular - 如果我不必像 ngAfterContentChecked() 和 ngAfterViewChecked() 调用那样多次调用语句怎么办

`ngAfterContentChecked() { console.log("内容检查"); }

ngAfterViewChecked(){ console.log("查看检查"); }`

我正在使用 Angular 开发一个项目。我需要在一个页面中调用一个语句块两次 - 1. 当我单击同一组件中的一个选项卡时。2. 当我单击页脚中的链接(不同的子组件)时,我可以在同一页面上看到这些按钮和链接。

用于在单击按钮和页脚中的链接上调用这些语句,其中语句仅在一个父级中定义。要检查来自另一个组件(页脚)的任何更新(单击),我需要使用 ngAfterContentChecked() 或 ngAfterViewChecked() 依次运行多次(在组件初始化后大约每秒),这对我来说并不像我需要的那样有用仅在单击页脚上的链接和单击父级中的按钮时运行它。

我只需要运行它 4 次(单击父选项卡 2 次,单击页脚中的链接两次)但这两个生命周期在控制台中给了我超过 100 次的结果,这不是使用这两个生命周期的正确方法。

如果有其他可能的方法,请告诉我,这将对我有很大帮助,谢谢。

0 投票
2 回答
522 浏览

angular - Angular 6 - 在检查错误和异步 *ngIf 后表达式已更改

*ngIf当指令基于异步条件时,如何摆脱上述错误?

在我的主要组件 ( products.ts) 中,我订阅了一个 observable,这是用户选择的结果,他可以通过与许多组件(包括products.ts)交互来实现。在此组件的模板 ( products.html) 中,我需要检查是否选择了任何产品,如果是,则显示它们的编号。

这一切都很完美,但我想摆脱这个错误。

产品.ts

产品.html

0 投票
1 回答
413 浏览

angular - 单击元素按钮时是否会调用 Angular 8 中的生命周期挂钩

我有一个包含两个嵌套组件的主组件,其中一个组件包含输入字段(2)和一个添加项目的按钮,另一个兄弟组件在循环中显示项目。

我有一个服务,它从输入组件中选择值并在服务本身中更新它的数组。

每当我填写输入并提交服务时,都会将新项目添加到数组中,但我需要更新需要显示此列表的兄弟组件。

我知道我必须从服务中获取值,因为它有一个更新的数组。

我不知道我可以在列表兄弟组件中使用哪个生命周期钩子来获取新列表,因为单击添加按钮时似乎没有调用 ngOnInit。

我不想使用事件发射器。

父组件

父 html

两个子组件放在父组件中:

列出兄弟姐妹

它是 html/模板

添加兄弟姐妹

它是模板 - html

0 投票
1 回答
1183 浏览

javascript - 组件在 Angular 8 中可见后如何运行函数?

只有当用户看到加载数据的特定组件时,我才想加载数据。所以不要在组件可见之前加载。

我有这个模板:

使用此 TypeScript 代码:

重点在这里:

仅当组件对用户可见时,如何OtherComponent才能启动?this.load()如果用户隐藏组件并再次显示它,我想再次重新加载数据。

我需要组件内部的解决方案来检测自身是否变得可见或消失。那是因为我有很多组件,以多种方式称呼彼此。

哪个 Angular 生命周期钩子仅在用户显示组件时触发?

0 投票
0 回答
779 浏览

angular - 在 Angular 8 的 Bootstrap 模式对话框中可见组件后如何运行函数?

在我的 Angular 项目中,我有一个select-box组件,它从我的数据模型中获取数据。选项基本上来自服务,所选值来自当前打开的数据模型。

我想在选择标签附近实现一个添加按钮。如果用户单击此按钮,他将获得一个模式窗口,其中包含模型的表单,该表单显示在选择中。如果用户在此处添加模型的新实例,则数据将保存到存储中,并且选择将使用此新实例进行更新。

我使用带有许多选择字段的复杂表单 - 带有许多加号按钮,打开许多创建组件。

我想避免在用户单击给定的加号按钮之前渲染这些组件。

这是我的父组件的 TypeScript 代码:

这是我现在如何使用我的选择组件的示例:

这是我的选择框组件的 HTML 代码:

我认为问题出在ng-content标签的使用上,因为它在渲染的同时渲染传入的代码<div class="modal" ...>

这是带有更详细代码的工作示例。

我可以避免以某种方式呈现app-lang-create-edit组件,直到模态不可见?

如果用户关闭并重新打开模式对话框,我想每次都重新渲染。

有什么解决办法吗?

0 投票
1 回答
292 浏览

angular - 在父 oninit 期间父功能正常时,Angular 子组件未初始化

ResetPasswordComponent在oninit 中触发时显示警报时出现问题。订阅块AlertService不会被触发,但是如果我将代码从 oninit 移动到构造函数,它将起作用。但是,将初始化/声明代码放在构造函数中似乎不是一个好习惯。那么有没有更好的解决方案呢?

家长

孩子

警报服务

0 投票
1 回答
215 浏览

angular - ngOnChanges 未被调用,但视图已正确更新

我有一个与以下代码相关的问题:

孩子

子模板

家长

父模板

我知道只有在数组引用发生更改时才会调用 ngOnChanges,如果我将元素推送到数组中,它将不会被调用。以下引起了我的注意。当我按下添加按钮时,一个新元素被添加到数组中并且视图被正确更新。我使用 json 管道和 ngFor 来证明它更新正确。如果我不使用 json 管道,行为是一样的。那么,如果视图更新正确,为什么不调用 ngOnChanges 呢?谁负责检测是否有更改以在视图中显示?

综上所述,疑点如下。为什么当一个元素被添加到数组中时,视图会正确更新,但为什么没有调用 ngOnChanges?

变化检测的方式不同?

0 投票
3 回答
1312 浏览

angular - 检查后表达式已更改 - 事件订阅更新

虽然我知道发生这种情况的原因ERROR,但是,我想知道如何在以下情况下克服:

我有一个通用加载器app.component。对于某些子路由,它会在ngOnInit生命周期中更新加载器值,直到获取记录。另外,我不想使用resolver,因为我正在解析组件中的查询参数,然后传递给服务以获取记录。

ERROR是由于在子组件生命周期钩子期间加载器的默认值false和更改。truengOnInit

请查看以下代码段:

以下是延迟加载子组件的片段:

ERROR 错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。以前的值:'ngIf: false'。当前值:'ngIf: true'。在 viewDebugError (core.js:19629) 在 expressionChangedAfterItHasBeenCheckedError (core.js:19617) 在 checkBindingNoChanges (core.js:19833) 在 checkNoChangesNodeInline (core.js:29533) 在 checkNoChangesNode (core.js:29522) 在 debugCheckNoChangesNode (core. js:30126) 在 debugCheckDirectivesFn (core.js:30054) 在 Object.eval [as updateDirectives] (AppComponent.html:3) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:30043) 在 checkNoChangesView (core.js: 29421)

尽管我也尝试过BehaviorSubject使用async管道,但这也无济于事。期待反馈。谢谢

0 投票
1 回答
315 浏览

angular - ngDoCheck (Angular9) 的真实用例

我是 Angular 的初学者并自学,我一直坚持使用ngDoCheck 生命周期方法

根据文档:
检测 Angular 无法或不会自行检测到的更改并采取行动。

父组件:

父视图:

子组件

据我所知,使用这种生命周期方法可以获取更深层次的最新变化,而 ngOnChanges 无法检测到更深层次的输入属性变化。

简单来说,ngOnChanges 只会检测到属性的变化,只有属性的引用发生了变化。

在上面的示例中,ngDocheck 生命周期方法没有做任何事情来获取属性的最新更改。但相反,变更检测有助于获得更深层次的最新变更

我想知道使用 ngDoCheck 生命周期方法的确切用例。

0 投票
1 回答
507 浏览

javascript - 从服务获取数据后,清除 ngOnDestroy 上的静态数据

我想清除 ngOnDestroy 上的数据。我从服务中获取这些静态数据。当前的情况是我使用相同的组件进行添加编辑,我只想在用户完成编辑后清除临时静态数据。

在组件中: