在 Angular 2 中，router.isActiveRoute 第一次不工作

Posted 2023-02-22

【中文标题】在 Angular 2 中，router.isActiveRoute 第一次不工作

【英文标题】：In Angular 2, router.isActiveRoute not working for the first time

【发布时间】：2016-04-20 02:52:39

【问题描述】：

我使用 router.isActiveRoute 来确定哪个路由是活动的。 在我第一次路由到home link 或menu link 时，路由发生了变化，但没有添加活动类。在第二次点击时添加active class。

我认为这是 angular2 中路由器指令的错误。 请告诉我为什么以及如何解决它？

app.ts

...
@Component(
    selector: 'app',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: 'app/components/app.html',
    styleUrls: ['app/components/app.css']
)
@RouteConfig([
     path: '/', component: Home, name: 'Home',
     path: '/menu', component: Menu, name: 'Menu'
])
class AppComponent 
    constructor(public router: Router) 
    
    isActiveRoutes(routes) 
        return this.router.isRouteActive(this.router.generate(routes));
    

app.html

<a [routerLink]="['Home']">
    <div class="icon-box" [class.active]="isActiveRoutes(['/Home'])">
        <i class="icon ion-ios-list-outline"></i>
    </div>
</a>
<a [routerLink]="['Menu']">
    <div class="icon-box" [class.active]="isActiveRoutes(['/Menu'])">
        <i class="icon ion-ios-bookmarks-outline"></i>
    </div>
</a>
<router-outlet></router-outlet>

谢谢

【参考方案1】：

如果您使用的是 Angular 4+，您应该使用 routerLinkActive="active" 指令而不是使用任何其他复杂的过程来确定当前路由未知时的活动路由。

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
      </li>

【参考方案2】：

解决方法很简单。将 angular2-polyfills.js 移动到 system.js 脚本标签下面就可以了。 这是一个已知问题#6140。 还有一个demo link。

@Component(
  selector: 'my-app', 
  providers: [],
  template: `
    <div>
        <ul>
          <li>
            <a [routerLink]="['First']">First</a>
          </li>
          <li>
            <a [routerLink]="['Second']">Second</a>
          </li>
          <li>
            <a [routerLink]="['Third']">Third</a>
          </li>
        </ul>
    </div>
    <router-outlet></router-outlet>
  `,
  styles: [".router-link-active  background-color: red; "],
  directives: [ROUTER_DIRECTIVES]
)
@RouteConfig([
  path: "/first", name: "First", component: FirstComponent,
  path: "/second", name: "Second", component: SecondComponent,
  path: "/third", name: "Third", component: ThirdComponent
])
export class App