angular - 更改 route 的参数

Question

我正在做一个项目，我需要两种语言的 GUI。我有 LangService，它为每个组件提供短语。每个组件根据当前路由从 LangService 获取事件语言并请求短语。

我的问题是...我需要在我的导航栏中设置“语言切换”，它位于主要的“app.component”中。导航栏始终位于顶部，因此我可以从每个组件访问它。我希望能够单击导航栏中的按钮并更改当前路线(更改当前语言)。这怎么可能？我认为有一种方法可以更改 route.params。这样我会改变 route.params['lang'] = 'EN';

AppComponent.html:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">{{ title }}</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <ol class="breadcrumb">
          <li *ngFor="let lang of langs"><a (click)="changeLanguage()">{{ lang }}</a></li>
        </ol>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

AppComponent.ts(我认为它会如何工作):

export class AppComponent {  
  changeLanguage() {
    // catch the route params lang
    // change route params
    // set new route
  }
}

Answer 1

使用导航导航到具有不同参数的相同路线。因此，如果您在/component/subroute/en 中并切换到西类牙语，请使用带有/component/subroute/es 路径的 router.navigate。

路由文档 ( https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters ) 包含一个监听更改路由参数的示例，您需要执行此操作，因为不会重新加载组件，因为实际路由不会更改，只会更改参数。