Question

我有3个导航栏主页，联系人和产品。 routerlinkactive适用于联系人和产品链接，但主页链接始终是活跃的为什么？

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

navbar.component.html

<li routerLinkActive="active"><a routerLink="/">Home</a></li>
        <li routerLinkActive="active"><a routerLink="/contact-us" >Contact-us</a></li>
        <li routerLinkActive="active"><a routerLink="/product" >Products</a></li>

app.module.ts

RouterModule.forRoot([
      {path:'', component:HomeComponent},
      {path:'contact-us', component:ContactusComponent},
      {path:'product', component:ProductsComponent},
      {path:'**', component:NotfoundComponent}
    ])

的package.json

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },

Answer 1

您需要添加：

[routerLinkActiveOptions]="{exact:true}"

否则它将匹配以/

开头的所有路径

routerlinkactive不适用于angular 4主页按钮

1 个答案: