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',
      },
    ]
 }
]

我可以在此处进行验证吗，如果用户输入的网址不正确，它将重定向到404页面？

例如domain.com/en/blog是有效的网址，而domain.com/anotherurl不是有效的网址。

我正在使用angular的版本7

Answer 1

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

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 2

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

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

Answer 3

您可以执行以下操作：

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

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

角路由可选参数验证

3 个答案: