问题标签 [angular-router]

我正在尝试在 Angular 中实现一个全局脏检查器。我们有一个需要配置每个组件的解决方案，但我希望对其进行更多概括。

我连接了将检查每个活动组件的全局代码，然后发出是否应提示用户的信号。或者至少，我认为它正在这样做。我最初的计划是列出router.events事件NavigationEnd并检查当前ActivatedRoute，因为它公开了一个component属性。但是，该属性是组件的类型/类，而不是实际实例。

我还没有找到公开当前组件实例的 API。它存在还是我被卡住了？

更新

我正在努力解决的用例不是路由更改，而是当窗口关闭时。触发时window:beforeunload，我无法询问组件实例是否脏。

更新 2 创建问题：https ://github.com/angular/angular/issues/18634

我有一个带有一个路由器插座的 Angular2 应用程序，该插座根据在侧面菜单中单击的链接显示不同的组件。

<router-outlet>包含如下所示的主要组件的标记

如果单击Demo链接，将呈现演示组件，但如果随后单击Home链接，则会在 DOM 中将 home 组件呈现在演示组件的上方。单击它们几次将产生这样的 DOM

路线定义为

为什么<router-outlet>在路由之间切换时没有替换组件，而是添加了组件的另一个“实例”？

我正在实施注册服务，用户建议选择三个参数：建筑（沙龙）、服务和公司（类别）。我ui-router用于AngularJS这个任务。

我已经创建了六个嵌套在彼此状态中的原型，如下所示：

这种方法在这样的实现中起作用。要传递的简单用例：使用自定义 url 运行应用程序：#/form/salons/1/services/2/categories/3它应该处于 state form.salons.services.categories。原型效果很好。

但是当我在我的生产应用程序中使用这种方法时，第一次更改后状态不会更改。不同之处在于，在生产中嵌套状态必须使用相同ui-view而不是嵌套，我认为这就是为什么状态没有改变的原因。

在解析 url 时处理状态更改的正确方法是什么？

我有以下应用程序根：

这是我的孩子（在 中使用的组件router-outlet）：

我发现我可以使用RouterOutlet来获取组件功能，但它似乎无法从应用程序根目录中访问。

如何myFunction()从应用程序根调用？

在我的路由器配置中，我DashboardComponent在路径下配置了一个'dashboard'，我想在未指定路径时自动将用户重定向到此路由（空路径，所以只是/）。

这是我的代码：

未处理的承诺拒绝：路由'{path：“”，redirectTo：“dashboard”}'的配置无效：请提供'pathMatch'。'pathMatch' 的默认值是 'prefix'，但通常意图是使用 'full'

我一直在寻找一种方法来使标准 a[href] 链接在动态加载到 [innerHTML] 时像 routerLinks 一样工作。它似乎不是标准的东西，我找不到任何我需要的东西。

我有一个可行的解决方案，但想知道是否有人知道任何更好的方法来做到这一点，或者我可能会遇到任何潜在的问题。

我在我的 app-routing.module.ts 中使用 jQuery，所以我声明了变量：

然后我找到所有具有 href 属性但不具有 routerlink 属性的锚点。然后我可以获取路径名并告诉路由器在点击时导航到它。

这似乎可以完成这项工作，但我认为必须有一种更“角度”的方式来做到这一点......

我一直在尝试太多的方法并坚持新的场景

下面是我的 app.module.ts

下面是我的 maincontent.module.ts

在 dashboard.module.ts 我有以下路线

问题是当我登录时，我直接导航到仪表板页面，它没有显示页面的任何内容。我哪里错了，请谁能指导我

当从子模块内从子路由导航到另一个同级子路由时，路由器不会破坏前一个组件，而是在向前和向后导航时附加新组件。

为什么会这样？

开始/#/subscriber/lookup，移动到/#/subscriber/register路线

应用程序.routes.ts

订阅者.routes.ts

app.module.ts

订阅者.module.ts

这是导航发生的情况：

我有一个指令，它为它添加到的任何元素添加一个图标。单击该图标时，我需要在包含该指令的任何组件中调用一个函数。此函数用于router.navigate将命名出口导航到新组件。一切正常，除了在我单击图标后，命名路由器插座的新内容在我移动鼠标之前不会显示。

以下是指令的相关部分：

这是我在模板中使用指令的地方：

这是指令发出时调用的父组件中的函数：

当我运行并单击指令显示的图标时，我会在控制台中看到预期的消息：“emitted”、“before nav”、“after nav”。但是在我移动鼠标之前，辅助路由（“名称：任务窗格”）不会更新为新内容。

更新：刚刚注意到这一点：如果任务窗格中的内容只是一个硬编码的字符串，那么它会立即显示。但是，如果我将插值绑定添加到任务窗格组件的属性（例如 {{Title}} ），那么绑定之前的任何硬编码文本都会立即显示。在我移动鼠标之前，绑定的文本和它之后的任何硬编码文本都不会显示。

这是面板组件：

这是面板模板 HTML：

最后，如果我在父组件上放置一个链接，该链接直接调用其editField函数（指令发出时调用的函数相同），那么一切正常 - 所有文本（硬编码和绑定）立即显示。

所以，我的问题是：路由中是否存在一些固有的东西导致绑定被解决的延迟？知道如何解决这个问题吗？

谢谢！

我有一个 listComponent、一个 detailsComponent 和一个 componentsCommunication 服务。我正在使用 router.navigate 从列表转到详细信息组件，并且我正在尝试通过 componentsCommunicationService 传递数据。

通信服务组件代码：

我的列表组件代码：

我的 listComponent.html 代码：我正在使用 Angular Material 2 数据表

在这里，我将行数据传递给函数 showAndPrint()。数据正常传递，我可以使用 console.log(row) 看到它。

最后是我的 DetailsComponent 代码：这里我正在尝试订阅服务并读取数据。我都在尝试订阅构造函数和 OnInit()。然而 this.incidents 总是未定义的。

另一种解决方案是将 id 作为参数传递并重新执行 http.get 请求以从数据库中获取详细信息，但是由于我已经拥有来自 listComponent 的数据，因此我想将其传递给详细信息组件而不重新执行http 请求。这可能吗？？

在 detailsComponent 中 this.incident 是未定义的...所以它不会从订阅中读取数据。