时间戳

首页 > 解决方案 > 当我们以角度浏览 router.navigate() 时如何添加活动类

angular - 当我们以角度浏览 router.navigate() 时如何添加活动类

问题描述

如果我使用 router.navigate() 导航到其他路由，如何根据路由添加活动类

模板代码

<div class="row">
    <div class="col-lg-7">
         <div class="row" *ngFor="let item of res " (click)="selected(item)">
               {{item.name}}
            <div> 
         <div>
     </div>
    <div class="col-lg-5">
      <router-outlet></router-outlet>
    </div>
</div>

ts文件

import {Router , ActivatedRoute} from '@angular/router';

constructor(public router: Router, public route: ActivatedRoute,) { }
    
routingSelected(partnerCode) {
    this.router.navigate([partnerCode] , { relativeTo: this.route });
}

标签： angulartypescriptangular6angular2-routing

解决方案

作为一种解决方法，您可以在 router-outlet 指令上放置模板变量以获取对 ActivateRoute 信息的引用。然后使用 ngClass 你可以动态添加 ngClass。

组件.html

<div class="row">
  <div class="col-lg-7">
    <div [ngClass]="{active:routerOutletVariable.isActivated && (routerOutletVariable.activatedRoute.url | async).
    some(cb(item.partnerCode))}" class="row" *ngFor="let item of res " (click)="selected(item)">
      {{item.name}}
      <div>
        <div>
        </div>
        <div class="col-lg-5">
          <router-outlet #routerOutletVariable="outlet"></router-outlet>
     </div>
  </div>

组件.ts

  cb = (partnerCode)=>{return (route)=>{
  return route.path === partnerCode;
  }}

推荐阅读