Question

如果链接项不采用不同的路径但只是在同一组件内进行不同的操作，如何给路由器提供链接突出显示..

import { Component, Input, Directive, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { CompactAnalystListComponent } from '../compact-analyst-list';

import { Router } from '@angular/router';
import { AuthService } from '../../../services/auth.service';

@Component({
  selector: 'app-compact',
  template: `
  <ul class="nav nav-tabs search-selector" role="tablist">
    <li *ngFor="let search of ordersReport"
      (click)="applyOrdering(search)">
      <a>{{ search.val }}</a>
    </li>
  </ul>
  <app-compact-research-report-list></app-compact-research-report-list>
    `
})
export class CompactComponent {

  private ordersReport = [
    { searchKey: 'uploadDate', val: 'Recent' },
    { searchKey: 'revFivedaytrend', val: 'Trending' },
    { searchKey: 'revUpside_percent', val: 'Upside' }
  ];

  constructor(
    private authService: AuthService,
    public router: Router
  ) {
  }

  applyOrdering(searchType) {
    this.authService.reportDDBS$.next(searchType.searchKey);
  }
}

如果每个RouterLinkActive占用一个单独的路线，则

li行为开箱即用，但在我的cse中，不仅仅applyOrdering()的操作会被触发，具体取决于当前li点击。

Answer 1

有两种方法可以动态添加类：

[class.active]="searching === search.searchKey"

或

searching

其中applyOrdering()是要在.active{ //Whatever you wish the link to look like when active }

中更改的类的私有变量

Angular文档推荐第二种方式

发帖说你可以写任何你想要的css

{{1}}

Answer 2

你自己说：

我没有任何路由器插座但只有一个静态组件

然后你就没有活跃的路线了。

如果您希望选择li，请为其提供ID，然后在点击时设置所选ID。如果搜索ID与所选ID匹配，则可以添加类。

import { Component, Input, Directive, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { CompactAnalystListComponent } from '../compact-analyst-list';

import { Router } from '@angular/router';
import { AuthService } from '../../../services/auth.service';

@Component({
  selector: 'app-compact',
  template: `
  <ul class="nav nav-tabs search-selector" role="tablist">
    <li *ngFor="let search of ordersReport" [class.XXX]="selectedID === search.id"
      (click)="applyOrdering(search)">
      <a>{{ search.val }}</a>
    </li>
  </ul>
  <app-compact-research-report-list></app-compact-research-report-list>
    `
})
export class CompactComponent {

  selectedID: number

  private ordersReport = [
    { id: 0, searchKey: 'uploadDate', val: 'Recent' },
    { id: 1, searchKey: 'revFivedaytrend', val: 'Trending' },
    { id: 2, searchKey: 'revUpside_percent', val: 'Upside' }
  ];

  constructor(
    private authService: AuthService,
    public router: Router
  ) {
  }

  applyOrdering(searchType) {
    this.selectedID = searchType.id;
    this.authService.reportDDBS$.next(searchType.searchKey);
  }
}

RouterLinkActive类似于没有路由的组件的行为

2 个答案: