问题标签 [angular-routerlink]

我是 Angular 新手，我正在尝试了解子路由的路由过程。如此处所述（https://angular.io/guide/router#milestone-4-crisis-center-feature），我希望在具有单独路由模块的单独功能模块中具有不同的应用程序功能。

在这些路由模块中，我配置了一些子路由，并且我有一个导航栏（在 feature.component.html 中），其中包含一些相对的 routerLinks（第一段中没有“/”，请参阅https://angular.io/api/路由器/路由器链接）。但是，这并没有按预期工作。它不是在 localhost:4200/child 和 localhost:4200/grandchild 之间切换，而是尝试从 localhost:4200/child 转到 localhost:4200/child/grandchild；我想了解为什么会这样。使用像'/child'这样的绝对routerLink，它可以工作；但据了解路由它也应该在没有前导斜杠的情况下工作，因为路由器然后根据激活的路由检查子节点

取自官方 Angular 文档：

第一个段名称可以在前面加上 /、./ 或 ../：

• 如果第一段以 / 开头，路由器将从应用程序的根目录查找路由。
• 如果第一段以 ./ 开头，或者不以斜杠开头，则路由器将改为查找当前激活路由的子节点。
• 如果第一段以 ../ 开头，路由器将上升一级。

feature.component.ts（仅限 NgModule）

feature.component.html

feature-routing.module.ts（仅路由）

app.component.html

app-module.ts（仅限 NgModule）

• 在第一次加载时，我看到带有导航栏的功能组件。网址说： localhost:4200
• 首先点击 'CHILD' = URL 更改为localhost:4200/child --> 现在可以了
• 第二次单击“GRANDCHILD”，它会尝试转到localhost:4200/child/(grandchild)，取自控制台输出：

  NavigationError {id: 32, url: "/child/(grandchild)", error: Error: 无法匹配任何路由。URL 段：ApplyRedirects.push../node_modules/@angu 中的“孩子”…}

为什么会这样？如何在控制台中输出激活的路由以更好地理解所有内容？

我有一个带有 4 个主要选项卡的页眉。MY PROFILE 选项卡 ( /profile) 在 route 有可用的 Action Items 子选项卡/profile/action-items。我还有 ACTION ITEMS 主选项卡，它基本上将用户重定向到/profile/action-items. 这是我的问题的根本原因。当/profile/action-items路由处于活动状态时，MY PROFILE 和 ACTION ITEMS 选项卡名称都会因routerLinkActive使用而突出显示。但是，我只希望在/profile/action-items

我尝试使用[routerLinkActiveOptions]="{exact: true}"，但在这种情况下，当我们导航到其子选项卡时，我的个人资料没有突出显示，例如/profile/bookmarks

有没有办法解决这个问题？

我的 Angular 应用程序模板中有以下代码，但无法按预期工作：

我在这里要做的是遍历一组项目并显示链接列表。问题是该项目可以具有url属性，或者routerLink. 根据项目具有的属性，我需要应用href属性或routerLink.

有没有办法在不使用 *ngIf 导致代码重复的情况下做到这一点？

I am trying to navigate to /login page whenever user clicks on the Login/Signup option present in my header component. But, whenever I clicks on Login/signUp it remains on the same page.

My app-routing.module.ts file is as below

and the HTML tag from which I am trying to call this is placed in my header.component.html

Also I have added router-outlet in my app.component.html

Though when I manually navigates to the login page i.e. by entering localhost:4200/login in browser, it successfully opens the login page.

My complete code can be found here -

https://github.com/vibhorgoyal18/atest-blog/tree/master/src/app

我最近在我的homepage.html使用中添加了一个简单的删除按钮：

我收到控制台错误：

HomePageComponent.html:96 ERROR 错误：尝试比较“[object Object]”时出错。只允许使用数组和可迭代对象

有人告诉我这是在我的 html 的第 96 行，就是这一行

这是我的homepage.ts：

}

这是我的 http.service.ts

这是我的 app-routing.module.ts

这是我的 routers.js

这是我的 pets.js 控制器

我的其他按钮工作正常，“编辑”和“详细信息”，但是这些按钮使用的是 [routerLink] 而不是我的（单击）功能。我在网上找到的答案似乎都没有帮助。如果我没有提供足够的代码，我很乐意提供更多代码。

谢谢你。

[编辑] 我应该提到该按钮仍将删除正确的对象，但仅在我刷新页面后显示。

我有一个显示主页、仪表板、请求表的主要渠道。

Dashboard 是一个画廊，用于显示不同类型的图块，如图表、表格。

我希望仪表板的每个图块中都有一个插座来显示图表或表格。

由于有多个 tile 实例，并且如果每个 tile 中有相同的出口，恐怕每个 tile 都会响应 /tile/chart 或 /tile/table 的导航请求。 我应该能够区分每个瓷砖插座。

主要出口 -> 主页、仪表板、请求。

仪表板 -> 使用另一个插座平铺组件以显示图表/列表。

主页组件

路线：

仪表板组件：

我正在尝试使用以下代码为我的菜单栏应用或突出显示导航路线，我能得到的是，我可以突出显示子菜单，但无法突出显示父菜单栏。

CSS类：

这是 componet.ts 文件中的 ngOnInit

当我使用 a[routerLink]导航到上述组件时，它会导航到该组件并加载视图，但它不会在ngOnInit方法之上触发。但是，如果我刷新页面，它就可以正常工作。
有没有解决上述问题的方法。

我已经习惯href了导航到页面，并且使用href上述方法总是可以正常工作，但速度很慢。这就是为什么我更改href为[routerLink].

这是包含视图的 component.html

我的 Angular 应用程序中有一个通知服务，通常你称之为

我也希望能够在消息中传递应用程序链接，并且我知道我需要允许SafeHtml输入，如下所示：

在我的服务中，这就是我所做的：

然后我像这样展示它：

所以……为了解决这个问题！这只是在某种程度上起作用，因为 HTML 得到了，但显然它没有被 angular 解析以使其具有routerLink功能。到浏览器的实际 HTML 输出是：

但是，它不可点击，因为实际上由 angular 解析的链接会输出以下 HTML：

我怎样才能让这些链接正常工作？

我是否以正确的方式解决这个问题？

我需要将电流传递userId给routerlinkinborrow_list component

我声明的userId方式borrow_list component

然后我尝试使用传递userId给另一个组件routerlink

但它似乎不起作用，没有错误，但它引导我回到主页

当我尝试对链接进行硬编码并且它按预期工作时，即

我的routes.ts

我想我在某个地方做错了吗？