Angular 4路由：是否可以向路由参数添加约束？

Question

我想为我的路由服务中的语言进行匹配。我的问题是，该语言必须先行。

例如：

/ zh / xxx

/ fr / xxx

/ en / yyy

/ fr / yyy

由于我想使用此参数，因此我添加了以下路线

{ path: ':lang',  children: [
      {path: '', redirectTo: 'xxx', pathMatch: 'full'},
      {path: 'xxx', component: x},
      {path: 'yyy', component: y}
]}

问题是，所有内容都匹配：lang。

例如：

/ abc / xxx

我想对此添加约束，以便可以说：lang只能是<'nl'|类型。'fr'| 'en'| 'de'>。

现在，当我想转到/robots.txt（应该向我显示robots.txt文件）时，它映射到：lang并将我发送到“ /robots.txt/xxx”

我尝试过分别映射每种语言，但随后我无法访问route参数。

我曾尝试在上面添加robots.txt，但由于它是资产文件，所以我不知道如何通过在route.ts文件中添加一行来显示它。

我尝试在路由防护中添加一个异常，但由于它仅保留在：lang参数上的映射，因此我无法重定向至robots.txt。

这是我当前的routes.ts文件：

{path: '', redirectTo: '/xxx', pathMatch: 'full', canActivate: [LangGuard]},
{path: 'xxx', component: xxx, canActivate: [LangGuard]},
{path: 'yyy', component: yyy, canActivate: [LangGuard]},
{ path: ':lang', canActivate: [LangGuard], children: [
      {path: '', redirectTo: 'xxx', pathMatch: 'full'},
      {path: 'xxx', component: x},
      {path: 'yyy', component: y}
]}

我的LangGuard非常广泛，但请写下简短的版本：

Get route parameters
If parameter is "nl", "fr", "de" or "en"
then return true //do nothing
else router.navigate('/' + decideLanguage() + state.url) // redirect to new url

也许我要实现的目标以及获得的目标概述：

我想要的是

/ -> /en/xxx
/abc -> /en/xxx
/xxx -> /en/xxx
/yyy -> /en/yyy

/en/xxx -> ok
/fr/xxx -> ok
/de/xxx -> ok

/en/abc -> notfound

/abc/xxx -> notfound
/abc/yyy -> notfound


/robots.txt -> ok

是）我有的

/ -> /en/xxx
/abc -> /en/xxx
/xxx -> /en/xxx
/yyy -> /en/yyy

/en/xxx -> ok
/fr/xxx -> ok
/de/xxx -> ok

/en/abc -> notfound

/abc/xxx -> ok (WRONG)
/abc/yyy -> ok (WRONG)


/robots.txt -> /robots.txt/xxx (WRONG)

注意：我不能为该语言使用redirectTo，因为根据本地存储选择了该语言，这就是为什么我使用routeguard的原因

如果我需要添加更多信息或您有任何疑问，请随时提出，我将尽我所能回答。

谢谢

Answer 1

我会尝试Angular UrlMatcher 。这样您就可以定义自己的网址匹配功能。恕我直言，防护人员更倾向于检查身份验证，而不是检查路由是否有效。

这是一个例子：

路由

export function checkLang(url: UrlSegment[]) {
  return url[0].path.startsWith('en') || url[0].path.startsWith('fr') || url[0].path.startsWith('de') || url[0].path.startsWith('nl') ? ({consumed: url}) : null;
}

export const routes = [  matcher: checkLang, component: TestComponent, children: [
      {path: '', redirectTo: 'xxx', pathMatch: 'full'},
      {path: 'xxx', component: x},
      {path: 'yyy', component: y}
]}]

然后是TestComponent

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-test',
  template: '<div>HELLO</div>'
})
export class TestComponent implements OnInit {

  constructor(
    public route: ActivatedRoute,
    public router: Router
  ) { }


  ngOnInit() {
    console.log('LANGUAGE: ' + this.route.snapshot.url[0].path); // here you get the language and you can act consequently 
  }
}