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

将活动类添加到角度4中的RouterLink

  •  0
  • yer  · 技术社区  · 6 年前

    我想在更改路由时添加一个活动类。 我在一个组件(主页)中有一个链接,可重定向到其他组件(详细信息页)。

    <a routerLink="/dashboard/details" (click)="Clicked()"</a>
    

    现在,当我从详细信息页返回到主页时,我想让a链接处于活动状态,告诉用户该链接已被单击。

    我试着用 路由器链接活动 ,但这似乎不起作用。

    HTML格式

    <a routerLink="/dashboard/details" routerLinkActive="active-link" (click)="Clicked()"</a>
    

    CSS

    .active-link {
        color:red;
        font-weight: bold;
    }
    

    有人能帮我吗?

    3 回复  |  直到 6 年前
        1
  •  1
  •   Nitin Walia    6 年前

    为什么不在单击事件时添加类名。试试这个。

    <a routerLink="/dashboard/details" [ngClass]="{'active-link':clicked}" routerLinkActive="active-link" (click)="Clicked()"</a>
    

    在.ts文件中

    clicked: boolean = false;
    
    Clicked() {
    this.clicked = true;
    }
    
        2
  •  0
  •   eduPeeth    6 年前

    解决:

    1. 可以使用 localStorage 存储已单击链接的信息。
    2. 可以使用路由器 queryParams 来存储信息。 使用捕获信息 ActivatedRoutes 以下内容:

      this.route.queryParamMap.subscribe( params => { this.enableCard = JSON.parse(params.get('enableCard')); })

    不是最好的解决办法,而是解决办法。

        3
  •  0
  •   Raja Reddy    6 年前

    [routerlinkactiveoptions]=“{exact:true} 你把这个放在它的旁边