Angular 路由可选参数验证

Question

我的应用程序中有路由，其中第一个参数不是专用的。这取决于我的应用程序有哪些语言

const routes: Routes = [
  {
    path: ':lang',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './modules/home/home.module#HomeModule',
      },
          {
        path: 'offers',
        loadChildren: './modules/offers/offers.module#OffersModule',
      },
      {
        path: 'blog',
        loadChildren: './modules/blog/blog.module#BlogModule',
      },
    ]
 }
]

我可以在这里进行验证吗？如果用户输入错误 url 它将重定向到 404 页面？

例如 domain.com/en/blog 有效 url 但 domain.com/anotherurl 无效。

我正在使用 angular

的版本 7

Answer 1

您可以为此使用通配符。如果你把它放在你所有的语言路径之后。路由器将从顶部开始匹配，如果没有其他匹配，将使用它。

  {
        path: "**",
        redirectTo: "404",
    },

Answer 2

是的，这是可能的。您可以做的是使用解析器：

const routes: Routes = [
  {
    path: ':lang',
    component: MainComponent,
    resolve: {foo: LanguageResolverService}
    children: []

解析器看起来像这样：

@Injectable()
export class LanguageResolverService implements Resolve<null> {
    constructor(private router: Router) {}

    public resolve(route: ActivatedRouteSnapshot, router) {

        const language = route.paramMap.get('lang');

        if(allowedLanguages.includes(language)) {
            return null;
        } else {
            this.router.navigate(['404']);
        }           
    }
}

现在，如果您的语言存在，解析器将简单地继续到所需的路线。如果没有，您可以将用户重定向到您想要的任何页面。

Answer 3

你可以这样做：

{
path: '**', // Wildcard
component: PageNotFoundComponent
}

PageNotFoundComponent 可以是您的自定义错误处理程序

Angular 路由可选参数验证

Angular routing optional parameter validation

angular

angular2-routing