একটি প্রোগ্রামক্রমেটিক উপায় হ'ল এটি উপাদানটিতেই করা। আমি এই ইস্যুতে তিন সপ্তাহ সংগ্রাম করেছি, তবে কৌণিক ডক্স ছেড়ে দিয়েছি এবং রাউটারলিঙ্ক্যাকটিভ কাজ এবং প্রকৃত কোডগুলি খুঁজে পেতে পারি তার সম্পর্কে প্রকৃত কোডটি পড়েছি।
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
}
দ্রষ্টব্য :
প্রোগ্র্যাম্যাটিক উপায়ে রাউটার-লিঙ্কটি যুক্ত করার বিষয়টি নিশ্চিত করুন এবং এতে একটি শিশু উপাদান লাগে। আপনি যদি এটি পরিবর্তন করতে চান তবে আপনার বাচ্চাদের এড়ানো উচিত superclass.nativeElement।
@inputবিকল্পগুলির জন্য একটি বিকল্প রয়েছে তবেexact: falseবর্তমান রুটের ভাইবোনরাও যখন সক্রিয় থাকে তখন ক্লাসটি সক্রিয় করে।