修改路由中的参数

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
  }
}

- Dawid Zbiński

Answer 1

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

路由文档（https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters）包含一个示例，用于监听路由参数的更改，您需要这样做，因为组件不会重新加载，因为实际路由没有更改，只是参数发生了变化。

- Lying Dog