问题标签 [routerlink]

如何从角度路由器链接中的参数中获取值？

这是我的代码

组件.ts：

服务 ：

我像这样在html上调用它{{Hotels.hotel_name}}，我得到了错误ERROR TypeError: Cannot read property 'hotel_name' of undefined

谁能帮我 ？

在我的标题组件中，我有一个登录按钮，可以让我登录到第三方网站。应用程序 sc2 在标头组件中使用 callbackURL 进行初始化。在标题中，我得到了一个用于连接到 sc2 的 LoginURL。我可以向 loginURL 添加一个状态，在我的情况下，它只是一个带有我所在当前页面的 id 的字符串，它在回调 URL 的参数中返回。问题是 Header 永远不会随状态更新，因为回调 URL 调用主组件（在路由器插座中加载） 标头本身加载在主组件之上。我无法让主要组件重新路由到原始组件。在我将按钮从主组件移动到标题组件之前，它一切正常，现在发送到主组件的状态没有更新到最后一页，所以我不能通过主要组件将它重新路由到原始组件。正在使用的页面。我尝试了 messageService 并使用了 localStorage，但好像标头组件永远不会按时更新。回调 URL 始终指向主组件。我可以直接与 Header 组件对话吗？

应用程序组件

page.component.ts

头组件.ts

我有一个边栏项目，当我点击它时它是活动的。很明显，当我单击组件内的子链接时，我的活动类会关闭。如何防止这种情况？

我的侧边栏：

我的组件（当我们单击侧边栏中的项目时将打开的页面）：

在我的页面中，您可以看到它的子项。在router.js它看起来像这样：

How would I implement "ngif" to a routerlink instead of creating a button?

example: *ngIf="auth.isAuthenticated()" (click)="auth.logout()"

To: <a [routerLink]="['/']">Logout

我正在构建一个 Angular 4 项目，我有一个父组件 A，在 HTML 中，有一个 [routerlinkA]，它链接到组件 B。在组件 B 内部，还有另一个 [routerlinkB] 链接回到 A。一切正常一开始还好。后来当我添加和更改一些代码时，我可以通过[routerlinkA]成功从A到B，也可以通过[routerlinkB]从B回到A，但是当我再次尝试从A到B时，这个[routerlinkA]不再起作用了！因为我有这么多的代码和订阅（rxjs），对于每个订阅我都添加了错误捕获，但是没有错误抛出到控制台，所以我不确定问题出在哪里。我检查了 [routerlinkA] 的 HTML，似乎当我从组件 B 回到组件 A 时，角度“ng 路由器绑定”消失了。

另外，我不知道这是否与我的错误有关，从组件A到组件B，对于路由器路径，如果路径内有参数，它会导致组件B中隐藏了一些div，但是对于[routerlinkA] A里面，没有参数。

很抱歉，由于某种原因我无法将代码发布出来。

可以再就哪个错误可能导致这种情况提供任何建议吗？（我很难调试，因为控制台没有错误）

我有一个带有 ngFor 的 Angular 应用程序，它从 firestore 集合中检索值，然后放置在 [routerLink] 中以导航到列表页面

在 class.component.html

页面按应有的方式导航到其目标。使用浏览器后退按钮时问题仍然存在。从class.component.html导航到classlist.component.html后，如果我按浏览器的后退按钮导航回 class.component.html，则 ngFor 的所有元素都不会呈现。如果我点击刷新 ngFor 返回/显示的所有元素。

classlist.component.ts

classlist.component.html

它正确地从 URL 输出 ActivatedRoute 快照“文件夹”，但是当我单击浏览器返回按钮返回到class.component.html 时，所有 DOM 元素都消失了。我必须重新加载页面才能返回所有内容

app.module.ts

如果我直接使用 href 而不是 routerLink 我使用浏览器后退按钮没有问题。所有 ngFor 元素在第一次加载时呈现，无需刷新。

这个href有效

而不是

另外，如果我直接从文档中使用 routerlink 它也可以

似乎问题持续存在的唯一时间是在从集合中检索数据时在ngFor内部使用[routerLink]

我到处寻找解决方案。有没有解决方案或者我在哪里犯了错误？

我有一个带有带参数的 RouterLink 元素的锚元素。为了导航到正确的页面，这些参数是必需的。现在，当我从不同的路径导航页面时，路由器链接可以工作。例如，我的路由器模块如下所示：

我有一个导航组件位于路由器插座之外，如下所示：

我的导航有一个搜索栏，它使用 RouterLink 路由到路径'movies/:movieTitle/:year'，只要我来自不喜欢的路径，它就可以工作'movies/:movieTitle/:year'。如果路径相似，即使电影标题和年份参数不同，角度也不会重新渲染。

例如，如果我在家'/'或者'movies'我可以使用导航栏成功转到'movies/The%20Dark%20Knight/2008'. 但如果我在上，'movies/The%20Dark%20Knight/2008'我无法使用导航栏转到'/movies/Taken/2008'. 我相信这与 Angular 试图减少类似路径的重新渲染有关，但是当相同的路径类型具有不同的参数时，如何让 Angular 更改视图？

额外信息

• 即使路由无法呈现新视图，浏览器中的路径 url 也会发生变化，并且与页面更改成功时的 url 相同
• 我的导航组件中有角度导航事件。我可以确认导航开始并且没有导航错误。还是要测试它是否取消。

回答

正如答案所说，我需要订阅参数。以前，当我获取参数时，我使用的是快照：

现在我直接获取参数并订阅它们：

我想问一些关于在 Angular CLI v1.6.8 中路由和导航的问题

在 HTML 中，我们可以使用：

如何在routerLink中使用它？我不能使用 href 因为我想做 SPA

之前谢谢

我无法获得在我的 Angular 2 应用程序中工作的链接。

我的页面由两部分组成：标题和下面的内容。这两个部分由每个部分的路由器插座建模。当我单击链接时，通常我想更改标题和内容。因此，我尝试使用 a routerLink并为每个出口定义链接位置，例如<a [routerLink]="[{ outlets: { primary: '/content', header: '/header' }}]">link</a>.

不幸的是，该链接不起作用。在控制台上，路由器抛出以下错误：

另外，我想知道链接是否被正确解析。检查 HTML 时，链接如下所示：<a ng-reflect-router-link="[object Object]" href="//content(header:/header)">link</a>

我想知道我做错了什么，感谢您的帮助！

这是设置：

app.module.ts

app.component.ts

应用程序路由.module.ts

链接/link.component.ts

标头/标头.component.ts

内容/内容.component.ts

我使用 Angular 的 5.2.8 版本。

我有 2 个组件搜索元数据和添加元数据。

我在搜索元数据中有一个编辑按钮，单击它应该路由到添加元数据。

编辑按钮位于 <ng-template> 内，当我单击编辑按钮时，它会路由到仪表板。

但是当我在 <ng> 标签之外添加编辑按钮时，它会正确路由到add-metadata

搜索-metadata.html

我的 layout-routing.module.ts 就像：

搜索元数据.component.ts ：

我在这里排除了任何不必要的代码