问题标签 [angular-routerlink]

我想生成的 URL 是：
http://localhost:8000/Home/(fooOutlet:foo/(barOutlet:bar))

我有一个名为“Foo”的路由器插座，它包含一个名为“Bar”的路由器插座。
如何在 Bar 中显示组件？
我创建了下面的代码，但它没有解决问题：

它给了我这个：

(fooOutlet:foo//barOutlet:bar)

但是我需要：

(fooOutlet:foo/(barOutlet:bar))

在我的小例子中，以下路径一切正常：

https://angular-d7eqku.stackblitz.io/path1

https://angular-d7eqku.stackblitz.io/path1?param1=1

但是如果我使用重复的查询参数来传递一组值 routerLinkActive 刹车：

https://angular-d7eqku.stackblitz.io/path1?param1=1¶m1=2

这是一个错误吗？我怎样才能绕过它？ 在 Angular 5/6 中对其进行了测试。

更新： 我稍微更新了我的示例，以说明为什么我想以这种方式传递一组参数（而不是将它作为具有多个值的一个参数传递）以及我如何使用它。

更新 2 ： 删除 [queryParamsHandling]="'preserve'" 后，它开始工作，所以问题可以缩小到： 为什么 routerLinkActive 在 queryParamsHandling="preserve" 时不能使用重复参数。

我有一个包含帐户列表的帐户页面。当用户单击其中一个帐户时，会在其旁边显示一个新组件，显示该帐户的最近交易。这是通过使用<router-outlet></router-outlet>函数动态设置 routerlink 并在 html 中动态设置的

但是现在我需要在该动态显示的组件上具有类似的功能，因此当单击按钮以显示 Tx 详细信息时，会出现第三个面板，其中显示另一个组件模板，其中包含该特定事务的详细信息。

在过去的几个小时里，我一直在尝试设置辅助路线和子路线之类的东西，但没有运气。

为清楚起见，这里是当前显示 2 个组件的帐户页面：

正如您所看到的，当用户单击中间交易列表中的 (i) 按钮时，我想在“测试”部分显示交易详细信息。

这是我希望在第三部分中显示的交易详细信息组件。

我有一个名为 branch 的子模块，我只想在导航到“/branch”网址时才加载它，但出现以下错误

导航与 routerLink 一起使用，如下所示

app-routing-module.ts 是：

分支模块是：

请有人可以告诉这里出了什么问题

我有一个看起来像这样的组件

它从父组件获取animal对象，这只是一个子组件列表。

当我点击它时，我正在移动到另一个组件，我想在其中显示这个点击animal对象的一些属性。

我想创建一个服务来存储这个对象，但问题是我不知道如何只获取单击的对象而不是列表中的每个对象。

所有的帮助将不胜感激。

我正在努力使用 Angular 框架来让我的应用程序顺利运行，但我无法解决路由问题。我有一个顶层AppComponent，app-routing.module.ts它通过我的自定义管理导航SlideMenuComponent。我的简化 html 模板AppComponent：

MySlideMenuComponent有以下 html 作为其核心：

用户可以'/courses'通过此滑动菜单导航到，该菜单由对从服务器检索CoursesComponent到的特定 s 的链接进行分页管理。CourseComponent这些组件驻留在自己的courses.module.ts模块中，并拥有自己的courses-routing.module.ts. 但是，当我单击任何这些链接时，我会收到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告，ngOnInit()不要求 openned CourseCompontent，并且在我单击页面上的任何按钮之前它不会更新。我在手动导航时遇到了这个问题，router.navigate()通过将此任务转发到解决了这个问题NgZone.runTask(router.navigate())，但是为什么anchor标签和routerLinkdirecrives 会发生这种情况？这是我的CoursesComponent代码摘录：

一个 gif 来演示这个问题：

在路由器链接活动时，我想更改{{menuItem.icon}}为{{menuItem.iconAtv}}

我已经这样定义了我的路线：

像这样：

我对如何.navigate()在组件或routerLink某些 html 元素中使用路由器方法导航到 ListPage 或 ProfilePage 很感兴趣。

我尝试过这样的事情

或者

或者

并得到这个错误：

错误：无法匹配任何路由。网址段：''

我有一个包含多个页面的应用程序（角度路由器，设置为显示角度组件的转子插座......）。在其中一个页面上，我有一个外部库，是我自己构建的，并已发布到一家托管 NPM 存储库的公司。当我手动输入 URL 时，我的库工作正常，但是当我使用 routerLink 路由时，父组件 (afgm-map) 会为 @ContentChildren (afgm-marker) 获取一个空数组。在 afgm-map 组件中，我放入了一个 console.log(markerRefs)，当我转到页面时它会打印标记，但是当我使用链接路由到页面时，它会打印一个空数组。

:(

如果我使用链接进入该页面并按 F5，它工作正常。有任何想法吗？

在我的 pageTemplate 上，我像这样渲染 lib：

带有用于调试的控制台日志的地图组件 ts 代码：

console.log(this.markersRefs);

标记组件只是一个外壳组件，没有真正的逻辑/模板：

我有这样的路由设置

我正在从 ListCmp 中选择一个项目并导航到例如“list/123”

在 ListCmp 构造函数/OnInit 中，我使用 :itemId 获取一些数据，它返回一个 SubNavItems 列表，其中第一个 SubNavItem 的 id 应作为参数添加（用于 routerLinkActive 突出显示和其他获取目的）。

这将导致当前 ListItemCmp 的破坏并实例化一个新的 ListItemCmp。我怎样才能防止这种情况？我已经尝试了 location.go() 方法，但这不会触发 routerLinkActive