Question

我想匹配我的路由服务中的一种语言。我的问题是，该语言必须是我的第一语言。

例如：

/ en / 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。

这是我当前的route.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 
  }
}

Answer 2

您可以使用canActivate防护，并以编程方式确定lang路由参数是您提到的四种语言之一。

Answer 3

选择的答案用于此目的，值得一提的是，如果某个人具有一个自定义组件（例如找不到的语言），这将不够灵活。除非听起来很不错，而且不可能从匹配功能内部进行导航，我对此表示怀疑。我认为在那种情况下，理想的情况是拥有一个容器组件来进行检查，否则导航匹配的：lang并将其余的加载为子项。

路由

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

组件

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

    @Component({
        selector: 'app-language-container',
        template: '<router-outlet></router-outlet>'
    })
    export class LanguageContainerComponent implements OnInit {

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


        ngOnInit() {
            // Do your checks here
            //  if fail
            this.router.navigate(['languagenotfound']);
        }
    }

如果您使用的是ngx-translate之类的库，则可能会注入

private translate: TranslateService

并使用

this.translate.getLangs().includes(langParam)

我认为您不能在UrlMatcher中注入服务

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

3 个答案: