gpt4 book ai didi

Angular 路由器导出失败,routerLink 位于 AppComponent 之外

转载 作者:行者123 更新时间:2023-12-02 14:20:56 25 4
gpt4 key购买 nike

我使用 Angular 5.2.0,我导航到:

/page/28/1

对应于:

{path: 'page/:albumId/:pageNo', component: AlbumPageComponent}

AlbumPageComponent html 包含:

<a class="nav-link" [routerLink]="[{ outlets: { popup: ['login'] } }]">

对应于:

{path: 'login', component: LoginComponent, outlet: 'popup'}

应该与 <router-outlet name="popup"></router-outlet> 一起使用放置到经典的 app.component.html 中(这是一个简单的 Angular cli 生成的项目)。

这不起作用,因为我在控制台中注意到它的路径格式错误:

NavigationStart(id: 3, url: '/page/28/1/(popup:login)')

但是这样使用时确实有效:

<a class="nav-link" [routerLink]="" (click)="goToLogin()">

AlbumPageComponent 具有:

goToLogin() {
this.router.navigate([{outlets: {popup: ['login']}}]);
}

正确的路径就形成了:

NavigationStart {id: 3, url: "/page/28/1(popup:login)"}

请注意,两种情况下的路由命令是相同的,即:

[{outlets: {popup: ['login']}}]

问: routerLink 有什么问题吗?方法?怎么解决?

PS:我还在 .angular-cli.json 中使用:"baseHref": "/albums/",尽管我认为这没有理由成为问题

编辑

https://angular.io/guide/router#wrap-up-and-final-app 中的示例也发生了同样的情况。为了复制,您必须复制 <a/> 联系到 CrisisCenterComponent html。这样,也像我一样,人们会使用 [routerLink]方法在与 AppComponent 不同的组件内。直接在AppComponent html中使用[routerLink]方法有效。

最佳答案

尝试这种格式:

<a class="nav-link" [routerLink]="['', { outlets: { popup: ['login'] } }]">

实际上,取自这里:https://stackoverflow.com/a/42098257/6528560

关于 Angular 路由器导出失败,routerLink 位于 AppComponent 之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49699024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com