Angular: 根据服务方法调用设置路由
Angular: Setup routes depending on service method call
我通过 @NgModule
设置了路由配置。我有一项服务,可以根据特定条件确定应向用户显示应用程序的哪些部分。我需要调用该服务并根据返回值设置路由。
问题:路由配置是在注释中设置的,我不知道如何在这样的设置中调用服务。
这里更具体的是我要增强的示例配置。
我当前的路由设置:
const appRoutes: Routes = [
{
path: '',
redirectTo: 'first-route',
pathMatch: 'full'
},
{
path: 'first-route',
component: FirstComponent,
pathMatch: 'full'
},
{
path: 'second-route',
component: SecondComponent,
pathMatch: 'full'
},
...
];
@NgModule({
imports: [RouterModule.forChild(appRoutes)],
exports: [RouterModule]
})
export class MyRoutingModule {
}
应该更改路由设置的服务:
@Injectable()
export class MyService {
getAccessibleRoutes(): Observable<string[]> {...}
}
问题:如何拨打服务电话和更改路线?
注意:我也查看了 "Dynamically adding routes in Angular" and "How we can add new routes dynamically into RouterModule(@NgModule imports)",但我没有在那里找到明确的答案。
如果我正确理解了你的问题,我想你可能可以考虑使用路由守卫来达到你的目标。我建议你使用守卫功能来指定访问你的路由的条件,而不是改变路由列表。
请查看此 link 以获取有关路由守卫的更多信息:
https://codecraft.tv/courses/angular/routing/router-guards/
希望对您有所帮助。
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { YourSecurityService } from './your-security.service';
@Injectable()
export class YourRouteGuardService implements CanActivate {
constructor(
private router: Router,
private yourSecurityService: YourSecurityService) {
}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
console.log(state.url); // HERE YOU CAN GET REQUESTED ROUTE
if (this.yourSecurityService.checkIfUserHaveAccess())
return true;
this.router.navigate(['your-route-to-redirect']);
return false;
}
}
接下来你应该将你的守卫应用到你的路线上:
const appRoutes: Routes = [
{
path: 'someroute',
component: RouteComponent,
canActivate: [YourRouteGuardService]
},
...
]
我通过 @NgModule
设置了路由配置。我有一项服务,可以根据特定条件确定应向用户显示应用程序的哪些部分。我需要调用该服务并根据返回值设置路由。
问题:路由配置是在注释中设置的,我不知道如何在这样的设置中调用服务。
这里更具体的是我要增强的示例配置。
我当前的路由设置:
const appRoutes: Routes = [
{
path: '',
redirectTo: 'first-route',
pathMatch: 'full'
},
{
path: 'first-route',
component: FirstComponent,
pathMatch: 'full'
},
{
path: 'second-route',
component: SecondComponent,
pathMatch: 'full'
},
...
];
@NgModule({
imports: [RouterModule.forChild(appRoutes)],
exports: [RouterModule]
})
export class MyRoutingModule {
}
应该更改路由设置的服务:
@Injectable()
export class MyService {
getAccessibleRoutes(): Observable<string[]> {...}
}
问题:如何拨打服务电话和更改路线?
注意:我也查看了 "Dynamically adding routes in Angular" and "How we can add new routes dynamically into RouterModule(@NgModule imports)",但我没有在那里找到明确的答案。
如果我正确理解了你的问题,我想你可能可以考虑使用路由守卫来达到你的目标。我建议你使用守卫功能来指定访问你的路由的条件,而不是改变路由列表。
请查看此 link 以获取有关路由守卫的更多信息:
https://codecraft.tv/courses/angular/routing/router-guards/
希望对您有所帮助。
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { YourSecurityService } from './your-security.service';
@Injectable()
export class YourRouteGuardService implements CanActivate {
constructor(
private router: Router,
private yourSecurityService: YourSecurityService) {
}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
console.log(state.url); // HERE YOU CAN GET REQUESTED ROUTE
if (this.yourSecurityService.checkIfUserHaveAccess())
return true;
this.router.navigate(['your-route-to-redirect']);
return false;
}
}
接下来你应该将你的守卫应用到你的路线上:
const appRoutes: Routes = [
{
path: 'someroute',
component: RouteComponent,
canActivate: [YourRouteGuardService]
},
...
]