问题标签 [angular-component-life-cycle]

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 投票
26 回答
293840 浏览

angular - Angular/RxJS 我什么时候应该取消订阅“订阅”

我应该在什么时候存储Subscription实例并unsubscribe()ngOnDestroy生命周期中调用,什么时候可以简单地忽略它们?

保存所有订阅会给组件代码带来很多混乱。

HTTP 客户端指南忽略这样的订阅:

同时路线和导航指南说:

最终,我们将导航到其他地方。路由器将从 DOM 中删除该组件并销毁它。在此之前,我们需要清理自己。具体来说,我们必须在 Angular 销毁组件之前取消订阅。不这样做可能会导致内存泄漏。

我们取消订阅我们ObservablengOnDestroy方法。

0 投票
0 回答
948 浏览

javascript - 在Angular4中对嵌套的角度组件使用“(更改)”事件绑定

我知道“(更改)”是用于输入、选择和文本区域字段的预构建事件绑定器。但是,当我们将它用作组件的事件绑定器时,这意味着什么?

调用组件:

在下拉列表组件中,有一个选择框以及一个用于过滤列表的文本框。选择选择框值时,我发射发射事件,该事件最终发射父部件的“ UpdateCcode”事件。

现在,如果我编辑文本字段并移除焦点,它会令人惊讶地触发“updateCCode”事件。最终,为了获得解决方法,我不得不将代码更改为:

以避免触发默认的“onChange”事件,因为我的事件绑定器名称是“(更改)”。

问题

这是一个正确的方法吗?为什么(更改)事件发射器在向组件触发时不会覆盖 onChange 本机函数?我应该实现某种 onchange 监听器并让它调用 'preventDefault' 吗?

0 投票
1 回答
140 浏览

angular - 在组件的 onDestroy 上处理 observables 和订阅

当组件被销毁时,Angular 是否会自动“处理/关闭/完成”组件使用的可观察对象及其相关订阅?

或者我应该在组件的 onDestroy 中明确地处理它们?

根据这个问题的公认答案,至少在 2017 年 4 月之前需要手动处理可观察对象。

我想知道是否仍然如此

编辑 1

在角度文档中,我发现这个管道 似乎可以解决问题,但我不确定如何在我的组件中使用它。开发人员不应该在 subscribe.next 中设置属性,而是应该将 observable 存储在属性中。如果我使用异步管道并将属性设置为可观察对象,以下组件模板将如何变为?

0 投票
1 回答
31 浏览

angularjs - 没有 URL 的 Angular 组件

我对 AngularJS(v 1.6)相当陌生,所以这可能是一个愚蠢的问题。

我正在尝试创建一个将在我的应用程序主页上使用的组件。不会有任何数据传递给它,而是我将进行 API 调用。

这是到目前为止的样子:

本质上,该组件将位于我的应用程序主页的导航中。我的问题是,当我调用 oninit 中的 api 服务时,它似乎永远不会及时获取数据以加载页面。任何建议都会很棒。

0 投票
1 回答
246 浏览

angular - 具有输入绑定角度 5 的孩子多次调用

我正在制作一个 Angular 5 的网站。我在其中一个组件中使用输入绑定。

对于“recommendedHotels”,我从 HTTP 服务获取数据。从 mongo DB 我只获取三个记录。它是一个 JSON 对象。它应该看起来像 图1

'app-recommend-popular' 组件用于一个组件酒店。它在Hotel的构造函数中调用服务函数(以获取数据)。
第一次调用组件时,一切正常。但是当我回到同一个组件时,事情就翻了一番。像图2

HTML 代码在这里:

这是服务代码:

获取代码(在“酒店”组件构造函数中)

谁能给我一个更好的方法?

0 投票
2 回答
3577 浏览

angular - Angular 动态设置组件 styleUrls

我在新项目中使用最新版本的 angualar 5.0。我是这个框架的新手,希望有角度的开发人员提供一些帮助。

我想在运行时动态设置带有类级别变量的 styleUrls 属性。在我的例子中,styleURL 路径将通过角度服务来自数据库。

有没有办法可以在 ngOnInit 事件或 SearchComponent 类的构造函数中设置组件的styleUrls 属性。

就我而言,每个客户端都有自己的样式表。所以这就是我需要从数据库中提取样式表路径并动态填充@components 属性。

0 投票
2 回答
858 浏览

angular - Angular ngFor 生命周期

*ngFor用来迭代一些这样的数据:

一切都很好,我得到了预期的结果:

然后,我想知道我是否使用函数而不是{{d}},所以我写了一个函数:

我用它:

我得到了与第一个代码相同的渲染 HTML 结果,但控制台输出不是我的预期输出。控制台输出:

添加的函数现在被调用了 12 次(每个项目 4 次)

这是您可以自己测试的代码:jsfiddle

我的代码错了吗?有什么解决方案可以防止这些额外的电话吗?为什么会发生这种情况,有人可以解释一下吗?

0 投票
1 回答
3002 浏览

angular - Angular 6 - @input 不起作用

我编写了一个简单的 Angular 应用程序来学习 @input 在组件之间进行通信,但该值没有被传递。我还阅读了一些遇到类似问题的论坛,但没有一个规定的解决方案对我有用。请指导。

app.component.html

任务组件.ts

当我试图在警报框中显示优先级的值时,我得到的值是未定义的。

让我知道是否有人希望我放置完整的代码。

0 投票
1 回答
2574 浏览

angular - 父视图更新时角度子组件不更新

因此,我在父视图之间共享了一些简单的同步本地数据,并且所有功能都很好,当本地数据更改时,所有使用它的父视图都会更新并正确反映。

然而,当我开始将我不断增长的项目拆分为自定义组件以防止代码重复和诸如此类的事情时,事情开始变得非常古怪。父组件仍然正常更新,但是尽管数据已绑定,但自定义组件子组件并未收到任何更改通知。此外,它只是父级之外的共享数据,父级本身的任何更改都会正常反映在视图上并按应有的方式更新。

就目前而言,当共享数据发生变化时,部分父组件发生变化,然后您必须单击页面以触发更改检测,这会导致大多数子组件突然获取单词并更新,但仍有一些不'没有得到这个词,所以你必须在父组件上稍微摆弄一下才能更新所有的视图,这很烦人。

我已经尝试过Tick()各种方法,ChangeDetectorRef也尝试过将它们置于不同的生命周期阶段,但我不知所措。

这是父组件上的一个子组件,它没有得到更新

这是一个

如上所述,单击页面通常足以让孩子们投入使用并进行更新。

有一个组件稍微复杂一些,它自己有 2 个子节点,它将 ngModel 传递给一个子节点,并让该子节点将一些不同的数据传递给它的兄弟节点。所以它就像

后者更复杂,尤其是不能正常工作,点击页面会更新孩子和孙子,但不会更新兄弟孙子

我如何理解这种混乱?

0 投票
3 回答
1658 浏览

angular - 如何按顺序在页面中加载角度组件?

我的问题场景如下,

我有一个带有大表格的页面(+100 个输入)。这些输入分为多个部分,这些部分被开发为不同的组件(用于重用目的)。所以页面的总体布局是这样的,

每个表单部分都需要一些时间来处理,因为大部分输入是材料选择框,并且需要从 REST API 加载必要的数据并进行处理。

在上面显示的布局中,angular 会尝试一次渲染所有表单部分,因此会增加每个部分的处理时间,这将导致浏览器冻结。

所以,我的计划是一个接一个地加载部分。有没有推荐的方法来实现这一目标?

我试图编写一个结构指令来一个接一个地加载组件。即使该指令有效,我也无法知道组件何时完成其内部处理工作(可能是 AfterViewInit 挂钩)。该指令看起来像这样,

.

.

如果我能以某种方式从IfPreviousBlockLoadedDirective这个方法访问关联的组件,它将无缝地工作。

是否有任何建议可以解决此问题,或者是否有任何其他方法可以在不更改表单部分组件的情况下实现此目的?

注意:表单部分可以是任何角度组件。