问题标签 [ngoninit]

我有两个具有父子关系的组件。父组件的 ngOnInit 方法检查用户是否登录，如果未登录，则导航到登录页面。

如果父组件想要导航到其他组件，我如何阻止这个级联 OnInit 调用？

我意识到在某些功能的产品在 JavaScript 中可用的方式和具体情况方面，我缺少一些东西。

在我的 Angular 应用程序中，为了获取用户的姓名首字母，我正在解析从 API 返回的数据，并在两个不同的函数中检索 firstName 的第一个字母和 lastName 的第一个字母。这两个功能按预期工作，我可以在控制台中看到正确的结果：

现在是我不完全理解的部分。然后当我传递这两个函数的返回值时，以获取首字母，如下所示：

...我得到“名字还没准备好！” 每次打印到控制台。

顺便说一句，我在 Angular 的 ngOnInit 生命周期钩子中运行这些函数，如下所示：

我知道这与什么时候可用有关，因为当我使用断点并调试传递给“getInitials()”函数的两个值时，我得到“未定义”。换句话说，该函数在运行时无法访问其他两个函数的返回值——因此我得到“名称未准备好！” 打印到控制台。我的问题是，我在架构上缺少什么来解决此类问题？

在我的 Angular 项目中，我调用该方法ConnectToHueBridge()并listAllGoups()从ngOnInit(). 在我看来，这两种方法都将并行执行。但我需要先运行ConnectToHueBridge()，然后再运行listAllGoups()。我怎样才能做到这一点？

如果我单击按钮执行该方法，一切正常。我怎样才能一个接一个地执行这些方法？

我想使用 AngularJS 4 从 API 流式传输数据。当我第一次调用 API 时没有数据，但最终将在 15 - 30 秒内返回更多结果。

这是我的组件：

这是我的服务电话：

我正在使用上面的 Observable 调用，但我也包含了 Promise 调用。

我相信我需要使用 Observable 调用，但我不确定我需要如何处理组件内的调用。

我有 3 个选项卡，其中一个选项卡显示一个包含员工列表的表格。第一次加载时效果很好。ngOnInit 使用 http get 从服务器获取数据。之后，当我单击添加新员工以打开一个表单时，该表单从用户那里获取输入，当单击该提交时，我调用一个函数，该函数调用 http post 服务将该数据发布到我的服务器并在其中插入记录，然后在那之后它被重定向回员工组件，但是现在已经加载了员工组件，除非我重新编译我的代码，否则我看不到我插入到表中的新记录。

employee.component.ts（加载员工表）

form.component.ts

员工服务.ts

应用模块.ts

问题是我从 ngOnInit 调用我的 API，它在组件第一次加载时完美加载。当我提交表单时，它会转到我的 API，然后被重定向回员工组件，但数据没有按应有的方式更新。

PS：对于这么小的帖子，我很抱歉。我对这个网站有点陌生。

更新 ：

自从我发布这个帖子以来已经一年多了，我看到很多人从中受益或没有受益。但是我想指出，我已经了解导致错误的原因，现在我将尝试让您了解解决方案。

这里要适应的最重要的概念是 Angular Life Cycle Hooks。发生的情况是，我们在第一次加载组件时调用 ngOnInit，这只会在 Angular 应用程序启动时触发一次。这类似于类构造函数，但它只触发一次。所以你不应该在这里放置任何与 DOM 相关的修改。你应该了解 Angular Life Cycle Hooks 来解决这个问题。自过去 8 个月以来我搬到 Vuejs 时，我没有一个可行的解决方案，但在一些空闲时间我会在这里发布更新。

HomeComponent

我在组件加载时检索数据。routerLink例如，当用户单击另一个SettingsComponent并返回到 时HomeComponent，当然会再次调用该函数，因为该组件已再次加载。但是每次我返回组件时，它都会再次调用函数，从而创建太多不需要的 HTTP 请求。我需要防止这种情况并确保该函数仅在第一次被调用。我该怎么做呢？我应该使用其他一些组件生命周期挂钩吗？

我的主页上有谷歌地图，我试图在关闭地图上显示的信息窗口时将用户路由到另一个页面：

问题是当我到达用户页面时，除了实际单击页面一次外，div 永远不会显示。怎么了？

我正在尝试从Angular2中的另一个数组初始化数组变量。让我详细解释一下。加载页面后，我会从服务器收到一个包含字符串的数组（我们称之为 initialArray）。而且我想初始化数组变量（我可以在我的组件中使用它），它们是空的，我可以在之后调用它。我想要数组的 initialArray.length 数量。我不知道我怎么能做到这一点

我的组件.ts

但是，此代码不起作用，因为 name 是一个数组...

当我在内部发生ngOnInit()错误时，该错误似乎被错误冒泡了TypeError: this._unregisterListenersFn is not a function。

例子：

在控制台窗口中给出预期的结果。但在 ngOnInit() 中：

按预期给出第一个“ngOnInit 中的错误”，但也

我正在尝试使用自定义错误处理程序处理所有错误，但是当 ngOnInit() 内部发生错误时，我只会得到最新的错误，而不是首先导致错误的错误。

编辑跟进： 我想我在 NgbPopover 中找到了根本原因。Chrome 开发者工具中显示的错误信息是：

在服务中有一些数据，并且当我在服务上的对象中有数据时工作得很好，但是现在我已经连接了数据库连接，数据永远不会进入组件。

我希望服务订阅从数据库返回的数据并定义如下调用：

该mapPersonFrominput()函数是模拟数据的保留。它与下面的 extractData 基本相同，但来自代码中的静态对象。

generatePerson 看起来像这样：

extractData 只是将输入对象中的值分配给服务的对象结构，handleerror 只是将错误记录到控制台。

我通过从导航组件调用此函数来调用服务以在组件加载之前从组件初始化数据对象：

在应该获取数据的实际组件中，我使用的是 ngOnInit，但我认为我应该使用 ngOnChanges 来初始化组件。这是我目前正在使用的代码，但还没有修复。

getName()只需返回我存储在服务中的对象。