Một cách lập trình sẽ là làm điều đó trong chính thành phần. Tôi đã vật lộn ba tuần về vấn đề này, nhưng đã từ bỏ các tài liệu góc cạnh và đọc mã thực tế làm cho bộ định tuyến hoạt động và Thats về các tài liệu tốt nhất tôi có thể tìm thấy.
import {
Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
from '@angular/core';
import { Location } from '@angular/common';
import { Subscription } from 'rxjs';
import {
ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{
public previousUrl: any;
private subscription: Subscription;
@ViewChild("superclass", { static: false } as any) superclass: ElementRef;
@ViewChildren("megaclass") megaclass: QueryList<ElementRef>;
constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
this.subscription = router.events.subscribe((s: Event) => {
if (s instanceof NavigationEnd) {
this.update();
}
});
}
ngOnInit(){
}
ngAfterViewInit() {
}
ngAfterContentInit(){
}
private update(): void {
if (!this.router.navigated || !this.superclass) return;
Promise.resolve().then(() => {
this.previousUrl = this.router.url
this.megaclass.toArray().forEach( (superclass) => {
var superclass = superclass
console.log( superclass.nativeElement.children[0].classList )
console.log( superclass.nativeElement.children )
if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
this.renderer.addClass(superclass.nativeElement.children[0], "box")
console.log("add class")
} else {
this.renderer.removeClass(superclass.nativeElement.children[0], "box")
console.log("remove class")
}
});
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }
//class is done
}
Lưu ý :
Đối với cách lập trình, đảm bảo thêm liên kết bộ định tuyến và nó cần một phần tử con. Nếu bạn muốn thay đổi điều đó, bạn cần phải thoát khỏi những đứa trẻ trên superclass.nativeElement.
@inputtùy chọn, nhưngexact: falsekích hoạt lớp bất cứ khi nào anh chị em của tuyến hiện tại cũng hoạt động.