Question

我有一个菜单项列表，当我点击它们时，显示内容发生了变化，一切正常，但我也希望能够使用所选标签更新网址路径，我想知道如何更新我目前的列表使用任何可用的给定角度2功能。

当前代码：

<ul class="nav nav-tabs">
            <li [class.active]="isTab('home')">
                <a (click)="setTab('home')">Home</a>
            </li>
            <li [class.active]="isTab('contacts')">
                <a (click)="setTab('contacts')">Contacts</a>
            </li>
....
</ul>

<home-view *ngIf="isTab('home')"></home-view>
<contacts-view *ngIf="isTab('contacts')"></contacts-view>
...

我希望每当我点击主页或联系人选项卡时，网址路径都会更新为.... / home或.... / contacts，这样用户就可以导航回到它离开。

我正在使用带有打字稿的角度2

Answer 1

如果你想要url和nvaigation链接，这不是一个正确的方法   工作

请选择路线，而不是使用ngIf来显示隐藏组件

routes = [
    ...
    {    path : 'home' , compoenent : HomeComponent },
    {    path : 'contacts' , compoenent : ContactsComponent },
    ...
];

模板面：

<ul class="nav navbar-nav">
  <li><a routerLink="/home" routerLinkActive="active" >About</a></li>
  <li><a routerLink="/contact" routerLinkActive="active" >Contact</a></li>
</ul>

<router-outlet></router-outlet>

要根据某条路线是否有效来添加某个类，我们可以使用routerLinkActive

有关详情： Watch this

Answer 2

你应该求助于路线。

即。在app.module.ts

const appRoutes: Routes = [
   { path: '',         redirectTo: 'home', pathMatch: 'full'},
   { path: 'home',         compoennt: HomeViewComponent, pathMatch: 'full'},
   { path: 'contacts',     compoennt: ContactsViewComponent, pathMatch: 'full'},
   { path: '**',           component: HomeViewComponent },
];

@NgModule({
  declarations: [],
  imports: [ 
    ...,
    RouterModule.forRoot(appRoutes, { enableTracing: false }),
  ],
  exports: [...]
  ],
  providers: [],
  bootstrap: [AppComponent]
})

然后在你的组件html中添加一个router-outlet

<ul class="nav nav-tabs">
            <li [class.active]="isTab('home')">
                <a (click)="setTab('home')">Home</a>
            </li>
            <li [class.active]="isTab('contacts')">
                <a (click)="setTab('contacts')">Contacts</a>
            </li>
....
</ul>
<router-outlet>

在您的组件ts中，您可以通过注入路由器来控制路由

constructor(private router: Router) {}

 setTab(newTab: string) {
    this.router.navigate([newTab]);
  }

使用所选选项卡更新URL路径

2 个答案: