Question

我想为角度应用添加多语言功能，我想在网站加载时设置默认语言。我有两种语言，西班牙语和英语，默认语言是西班牙语。为实现这一点，我定义了以下路由：

const routes: Routes = [
  {
    path: ':lang', component: LanguageComponent,
    children: [
      { path: 'route1', component: Component1 },
      { path: 'route2', component: Component2 },
      { path: 'route3', component: Component3 },
      { path: 'route4', component: Component4 },
      { path: '', component: Component1 , pathMatch: 'full' },
    ],
  },
  { path: '', redirectTo: 'es', pathMatch: 'full' }
];

首先，我不确定这是否是正确的路由结构，考虑到我想要实现的目标是为两种语言设置相同的路由，并在运行时使用我开发的翻译服务执行转换。我的主要问题是，当我试图检查路线的参数时，我总是得到不确定的。这是我的onInit：

this.activatedRoute.params.subscribe((params: Params) => {
  this.currentLanguage = params['lang'];
});

我也尝试过：

this.activatedRoute.params.subscribe((params) => {
  this.currentLanguage = params.lang;
});

我认为问题在于重定向，但我不知道在执行重定向时如何设置“：lang”参数。这有意义吗？

Answer 1

我认为最好的解决方案是创建AppTranslateService，它将提供LanguageComponent中设置的语言：

@Injectable()
export class AppTranslateService {
  public lang: string = 'es';
}

@Component({/*...*/})
export class LanguageComponent {
  constructor(appTranslateService: AppTranslateService, activatedRoute: ActivatedRoute) {
    activatedRoute.params.subscribe((params) => {
      appTranslateService.lang = params['lang'];
    });
  }
}

并在其他组件中阅读appTranslateService.lang变量。

或者，您可以直接从Angular的Router注射中获取所需的参数，例如这样：router.url.split('/')[1]（或在服务中执行一次）。

获得角度4的参数

1 个答案: