子模块子路由不工作 ( "Error: Cannot match any routes." )

Question

我正在使用Angular 6.0.3。我有一个名为"管理员"的子模块，其中包含三个组件。管理员的根组件("管理员组件")路由工作正常(path: "")，但我似乎无法触发任何其他组件。为什么 Angular 找不到我的路线？

路线.ts

import { Routes } from "@angular/router";
import { SplashComponent } from "./splash/splash.component";
import { LoginComponent } from "./login/login.component";
import { WatchComponent } from "./watch/watch.component";
import { AdminComponent } from "./admin/admin/admin.component";
import { HomeComponent as AdminHomeComponent } from "./admin/home/home.component";
import { AddSongComponent } from "./admin/add-song/add-song.component";
import { AdminGuard } from "./auth/admin.guard";
export const appRoutes: Routes = [
{
path: "",
children: [
{ path: "", component: SplashComponent, pathMatch: "full" },
{ path: "login", component: LoginComponent, pathMatch: "full" },
{ path: "watch", component: WatchComponent, pathMatch: "full" },
{
path: "admin",
component: AdminComponent,
pathMatch: "full",
canActivate: [AdminGuard],
children: [
{
path: "",
component: AdminHomeComponent,
pathMatch: "full",
outlet: "admin"
},
{
path: "add-song",
component: AddSongComponent,
pathMatch: "full",
outlet: "admin"
}
]
}
]
}
];

admin/admin/admin.component.html

<router-outlet name='admin'></router-outlet>

admin/home/home.component.html

<div>
<a mat-raised-button [routerLink]="['add-song']">Add new song</a>
</div>

注意：我也试过[routerLink]="[{ outlets: { admin: ['add-song'] } }]，仍然找不到路由。

Answer 1

我建议您在加载子模块时查看Lazy-loading功能，这是当您有许多模块时加载的正确方法。

在您的情况下，您将管理模块作为子模块，因此这是路由配置，

RouterModule.forRoot([
{ path: '', redirectTo: 'splash', pathMatch: 'full' },
{ path: 'splash', component: SplashComponent },
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '**', component: NotFoundComponent }
], { enableTracing: true })]

并且管理模块路由如下，

RouterModule.forChild([
{
path: '', component: AdminComponent,
children: [
{ path: '', component: AdminHomeComponent }
,
{ path: 'add-song', component:  AddSongComponent}]
}
])
]

工作堆栈闪电战演示

路线：

溅

• https://nested-routes-angular-lazyloading.stackblitz.io/splash

管理

• https://nested-routes-angular-lazyloading.stackblitz.io/admin

管理员-添加歌曲

• https://nested-routes-angular-lazyloading.stackblitz.io/admin/add-song

Answer 2

您是否尝试过在其自己的模块中创建与管理相关的组件？ 然后，您可以创建一个admin-routing.module.ts

const adminRoutes: Routes = [
{
path: '',
component: AdminComponent,
children: [
{
path: '',
children: [
{ path: 'add-song', component: AddSongComponent },
{ path: 'something-else', component: SomeOtherComponent },
{ path: '', component: AdminDefaultComponent }
]
}
]
}
];
@NgModule({
imports: [ 
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {}

然后在您的主app-routing.module中，您可以将其称为

const appRoutes: Routes = [
{ path: '', component: SplashComponent },
{ path: 'login', component: LoginComponent },
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
},
{ path: '**', component: SomeOtherComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
],
})
export class AppRoutingModule { }

编辑：我注意到您确实创建了自己的子模块，因此您需要为此子模块创建一个路由模块。

Answer 3

这可能是迟到的回复，但我想专注于 1 件重要的事情，angular 编译器非常聪明，可以检测您当前在哪个根上。因此，如果您从模板调用任何嵌套路由.html它将自动检查 url 中的当前路由，并且您想要的任何路由都会将其附加到当前路由。

简单来说，你试图在代码中执行的操作admin/home/home.component.html你试图触发add-song路由，它会给你结果，因为admin/add-song不存在。不过这几乎是意料之中的

共享路由配置。 用于子级和其他一些代码片段。

children: [
{
path: "admin-home",
component: AdminHomeComponent,
pathMatch: "full",
outlet: "admin"
},
{
path: "add-song", 
component: AddSongComponent, 
pathMatch: "full",
outlet: "admin"
},
{path: '', 
redirectTo:'admin-home', 
pathMatch: 'full'}
]

现在从您的admin/home/home.component.html使用下面的路由器链接

<div>
<a mat-raised-button [routerLink]="['/add-song']">Add new song</a>
</div>

到目前为止，您一直在尝试添加相对路径，特别是在routerLink中的角度中，它将检测当前路径并将预期路径附加到当前 path.so 的末尾，否则会给您错误。因此，请尝试在嵌套路由中提供绝对路径。

但是这个.router.navigate()方法不会自动理解它的当前路由。它总是从根路由开始路由，即如果您尝试从 .ts 文件调用嵌套路径，那么 angular 将无法识别当前路径。因此，如果您愿意告诉角度哪个是当前路由，那么从 .ts 文件中您可以做这样的事情

import { ActivatedRoute, Router } from '@angular/router';
...
constructor(private route: ActivatedRoute, private router: Router) { }
...
this.router.navigate(['./add-song'], {relativeTo: this.route}); 

还有一件事就像<a mat-raised-button [routerLink]="['add-song']">Add new song</a>这与<a mat-raised-button [routerLink]="['./add-song']">Add new song</a>相同，或者<a mat-raised-button [routerLink]="['../add-song']">Add new song</a>这是相对路径，则必须使用绝对路径

否则，请尝试从 .ts 组件调用路由，而不relativeTo属性和相对路径。

希望这可能对你有用

Answer 4

这是您的代码的一个工作示例，修复只是删除除重定向路由之外的所有位置pathMatch: 'full'。

重定向路由需要 pathMatch 属性来告知路由器如何将 URL 与路由路径匹配。如果不这样做，路由器会引发错误。在此应用中，路由器应仅在整个 URL 匹配 '' 时才选择到 HeroListComponent 的路由，因此请将 pathMatch 值设置为 'full'。

请考虑文档，以了解有关该属性的更多信息。

Answer 5

问题是您没有为路径">定义任何组件

import { Routes } from "@angular/router";
import { SplashComponent } from "./splash/splash.component";
import { LoginComponent } from "./login/login.component";
import { WatchComponent } from "./watch/watch.component";
import { AdminComponent } from "./admin/admin/admin.component";
import { HomeComponent as AdminHomeComponent } from "./admin/home/home.component";
import { AddSongComponent } from "./admin/add-song/add-song.component";
import { AdminGuard } from "./auth/admin.guard";
export const appRoutes: Routes = [
{
path: "",
component: SplashComponent,
children: [
{ path: "login", component: LoginComponent, pathMatch: "full" },
{ path: "watch", component: WatchComponent, pathMatch: "full" },
{
path: "admin",
component: AdminComponent,
pathMatch: "full",
canActivate: [AdminGuard],
children: [
{
path: "",
component: AdminHomeComponent,
pathMatch: "full",
outlet: "admin"
},
{
path: "add-song",
component: AddSongComponent,
pathMatch: "full",
outlet: "admin"
}
]
}
]
}
];

Answer 6

我认为您的问题与为锚标签生成角度的路径有关。 目前您指的是路径"添加歌曲"。Angular 将此路径视为"localhost：4200/add-song"。如果你想把它路由到admin/add-song，那么你需要定义完整的路径(不知道为什么angular 这样做)。如果你可以试试

<a mat-raised-button [routerLink]="['admin/add-song']">Add new song</a>

这可能暂时有效，但这不是一个完美的解决方案。 谢谢