改变路线

时间:2016-08-24 08:54:07

标签: angular routing

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

我的问题是......我需要让我的“语言切换”在我的导航栏中,该导航栏位于主“app.component”中。 Navbar始终位于顶部,因此我可以从每个组件访问它。我希望能够单击导航栏中的按钮并更改当前路线(更改当前语言)。这怎么可能? 我认为有办法改变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
  }
}

1 个答案:

答案 0 :(得分:2)

使用导航导航到具有不同参数的相同路线。因此,如果您位于/ component / subroute / en并切换到西班牙语,请使用router.navigate,其路径为/ component / subroute / es。

路由文档(https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters)包含一个用于侦听路由参数变化的示例,当组件不能重新加载时,您需要这样做,因为实际路由不会改变,仅仅是参数。