在 angular5 的 app.routes.ts 中定义一个带有约束的路由（它应该包含一个字符串）

Question

当我的 url 包含“.vpf”时，我必须导航到一个组件。如何为此 app.routes.ts

定义路由

   {path:':section',component:SectionBasedListingComponent},

它会在我给 url 时导航，比如 http://localhost:4200/anystring。

同样，当我的字符串包含 .vpf 时，我需要导航。我怎样才能做到这一点

谁能帮帮我

谢谢

Answer 1

您可以使用 Guards 实现此目的

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(public router: Router) {}

 //check for parameter using ActivatedRoute or else

  //Navigate to this.router.navigate(['required path']);
}

检查它在 AuthGurads 中是如何完成的

{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },

Answer 2

你可以为此使用守卫，检查你的字符串是否存在并重定向到你有新组件的新路由：

 import { Injectable } from '@angular/core';
 import { CanActivate,ActivatedRouteSnapshot, RouterStateSnapshot } from 
    '@angular/router';

 import { AuthService } from './auth.service';

 @Injectable()
 export class CanActivateRouteGuard implements CanActivate {

 constructor(private auth: AuthService) {}

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
  boolean {
   if (state.url.indexOf('.vpf') !== -1) {
      this.router.navigate(['/yourNewRoute']);
    }
    return true;
  }
 }



{ path:':section',component:SectionBasedListingComponent , canActivate: [CanActivateRouteGuard ]},

在 angular5 的 app.routes.ts 中定义一个带有约束的路由（它应该包含一个字符串）

Define a route with constraints(it should contains a string) in app.routes.ts in angular5

angular

angular5