如果链接项不采用不同的路径但只是在同一组件内进行不同的操作,如何给路由器提供链接突出显示..
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
点击。
答案 0 :(得分:0)
有两种方法可以动态添加类:
[class.active]="searching === search.searchKey"
或
searching
其中applyOrdering()
是要在.active{
//Whatever you wish the link to look like when active
}
Angular文档推荐第二种方式
发帖说你可以写任何你想要的css
{{1}}
答案 1 :(得分:-1)
你自己说:
我没有任何路由器插座但只有一个静态组件
然后你就没有活跃的路线了。
如果您希望选择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);
}
}