Angular:如何在点击routerLink时获得auth.guard.ts中的url

Question

我想在点击routerLink创建的链接时获得auth.guard.ts文件中的URL。请参阅下面我在.html文件中的代码：

<li><a href="javascript:void(0)" routerLink="genre" routerLinkActive="active">Genre</a></li>
<li><a href="javascript:void(0)" routerLink="category" routerLinkActive="active">Category</a></li>

这是我在auth.guard.ts文件中的代码片段：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
console.log('URL = ' + state.url)
...
}

只有当我刷新浏览器/页面时，我才能在控制台中看到URL。但当我点击上面指定的"类别"或"流派"之类的链接时，控制台什么也不显示。

下面是我的路由文件：

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { AuthGuard } from '../_guards/auth.guard';
const routes: Routes = [{
path: '',
component: PagesComponent, canActivate: [ AuthGuard ],
children: [
{
path: 'genre',
loadChildren: () => import('./genre/genre.module')
.then(m => m.GenreModule),
},
{
path: 'category',
loadChildren: () => import('./category/category.module')
.then(m => m.CategoryModule),
},
]
},
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PagesRoutingModule {
}

Answer 1

您可以尝试在子路由中添加canActivate:[AuthGuard]吗。

children: [
{
path: 'genre',
canActivate: [ AuthGuard ],
loadChildren: () => import('./genre/genre.module')
.then(m => m.GenreModule),
},
{
path: 'category',
canActivate: [ AuthGuard ],
loadChildren: () => import('./category/category.module')
.then(m => m.CategoryModule),
},
]