代码之家 › 专栏 › 技术社区 › Deadpool

角度路由RouterLink活动类未从基页中删除,即使在其他链接路由上也是如此

angular-routing angular javascript

Deadpool · 技术社区 · 7 年前

我提供了一个简单的路由示例,效果很好。唯一的问题是 RouterLink活动 班上的人不会被赶出家门吗?

<ul>
  <li><a [routerLink]="''" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="'/about'" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'/window'" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

app.module.ts

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
  ])
]

.baboossa {background:orange;}

结果:

有人能指出的问题,为什么我得到2个橙色的背景上其他活动的链接比基地一(家)?

2 回复 | 直到 7 年前

Shashikant Devani 7 年前

可以使用两种方法进行存档:

添加routerLinkActiveOptions [routerLinkActiveOptions]="{ exact: true }" RouterLink处于活动状态。

这样地: [routerLink]="''" [routerLinkActive]="['baboossa']" [routerLinkActiveOptions]="{ exact: true }" .

重定向空路由器 path : '' 到任何特定路径,如{path:'',重定向到路由器模块中的:'home'}。

[{
    path: '',    
    pathMatch : 'full',
    redirectTo: 'home'
},
{
    path: 'home',    
    component: HomeComponent
}]

和改变 [routerLink]="''" 具有 [routerLink]="'home'" .

这是你的名字 Stackblitz

Syamkumar S 7 年前

我想你可以查看下面的链接

https://stackblitz.com/edit/angular-router-basic-example-jufxu8?file=app/app.routing.module.ts

Angular Routing

Dler Hasan 6 年前

下面是另一种方法,可以将命名路径作为默认路径,而不是空路径。restfulapi方法,其中URL很容易理解。

<ul>
  <li><a [routerLink]="[ 'home' ]" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="[ 'about' ]" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'[ 'window' ]" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

然后

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'home', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
    {path:'**', redirectTo: 'home'}
  ])
]

Ali 5 年前

我也有同样的问题。但当我在家的时候,我想清空这条路。

我不想使用 [routerLinkActiveOptions]=“{exact:true}” 因为当我在家的时候问题菜单处于非活动状态。

比如:父域

不是:abc.com/主页

const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'questions/:questionsId', component: QuestionsComponent }, { path: 'questions', component: QuestionsComponent }];