Question

我希望所有路线都以如下语言参数开头：

/en/home
/fr/home

我的路由器出口位于我的AppComponent中。现在，AppComponent为整个应用程序设置了我的html模板，并且还具有语言切换按钮。

目前，我有以下路线：

 const routes: Routes = [
  { path: ':lang/home', component: HomeComponent },
  { path: '',  redirectTo: 'en/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

如果我尝试在AppComponent中访问它们，则该值为null。如果我在Home中执行完全相同的代码，则将找到该值并起作用。但是我需要AppComponent中的参数，所以对我没有帮助。

现在，我的路由中只有1个示例，但是在应用程序中我将有很多路由，所有路由都应以lang参数开头。

我尝试进行研究，但似乎找不到任何帮助。当我放入AppComponent中时，我尝试的所有示例均无效。

编辑： 这是我的AppComponent的片段

constructor(private translate: TranslateService, private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.translate.setDefaultLang('en');

    this.route.paramMap.subscribe(params => {
      const lang = params.get('lang');
      console.log(lang);
      if (lang != null && (lang === 'fr' || lang === 'en')) {
        this.switchLanguage(lang);
      }
    });
  }

  switchLanguage(language: string) {
    this.translate.use(language);
    if (language === 'en') {
      this.isEnglish = true;
    } else {
      this.isEnglish = false;
    }
    console.log('switching to: ' + language);
  }

Answer 1

将其更改为以下内容：

{ path: ':lang', component: AppComponent, children: [
   { path: 'home', component: HomeComponent },
]},
{ path: '',  redirectTo: 'en/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }

那么您应该可以通过在ngOnInit中将其从AppComponent提取到服务组件来访问所有子项。

AppComponent

1 个答案: