AppComponent中的Angular 6路由URL字符串参数
我希望所有路线都以如下语言参数开始:AppComponent中的Angular 6路由URL字符串参数,angular,parameters,angular6,angular-routing,Angular,Parameters,Angular6,Angular Routing,我希望所有路线都以如下语言参数开始: /en/home /fr/home 我的路由器出口位于我的AppComponent中。现在AppComponent为整个应用程序设置我的html模板,它还具有语言切换按钮 目前我有以下路线: const routes: Routes = [ { path: ':lang/home', component: HomeComponent }, { path: '', redirectTo: 'en/home', pathMatch: 'full'
/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。如果我在家中使用完全相同的代码,则会找到值并工作。但是我需要AppComponent中的参数,所以这对我没有帮助
现在我在routes中只有一个示例,但是我在应用程序中有很多routes,所有这些都应该以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);
}
将其更改为以下内容:
{ path: ':lang', component: AppComponent, children: [
{ path: 'home', component: HomeComponent },
]},
{ path: '', redirectTo: 'en/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
然后,通过在ngOnInit中将其从AppComponent提取到服务组件,您应该可以访问所有child。将其更改为类似以下内容:
{ path: ':lang', component: AppComponent, children: [
{ path: 'home', component: HomeComponent },
]},
{ path: '', redirectTo: 'en/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
然后,通过在ngOnInit中将其从AppComponent中提取到服务组件,您应该可以访问所有子组件。成功了,在这种情况下,我必须在app component和我的子组件之间创建一个新组件,并将其用作:lang的组件,但在其他方面效果良好。thanksit是一个令人愉快的工作,在这种情况下,我必须在应用程序组件和我的子组件之间创建一个新组件,并将其用作:lang的组件,但在其他方面效果良好。谢天谢地