Wie bestimmen Sie in Angular die aktive Route?

HINWEIS: Hier gibt es viele verschiedene Antworten, und die meisten waren zu der einen oder anderen Zeit gültig. Tatsache ist, dass sich das, was funktioniert, mehrmals geändert hat, als das Angular-Team seinen Router geändert hat. Die Router 3.0-Version, die später der Router in Angular sein wird, bricht viele dieser Lösungen, bietet jedoch eine sehr einfache eigene Lösung. Ab RC.3 ist die bevorzugte Lösung die Verwendung [routerLinkActive]wie in dieser Antwort gezeigt .

Wie bestimmen Sie in einer Angular-Anwendung (aktuell in der Version 2.0.0-beta.0, während ich dies schreibe), welche Route derzeit aktiv ist?

Ich arbeite an einer App, die Bootstrap 4 verwendet, und ich brauche eine Möglichkeit, Navigationslinks / -schaltflächen als aktiv zu markieren, wenn die zugehörige Komponente in einem <router-output>Tag angezeigt wird .

Mir ist klar, dass ich den Status selbst beibehalten könnte, wenn auf eine der Schaltflächen geklickt wird, aber das würde nicht den Fall abdecken, dass mehrere Pfade auf derselben Route liegen (z. B. ein Hauptnavigationsmenü sowie ein lokales Menü in der Hauptkomponente ).

Anregungen oder Links wäre dankbar. Vielen Dank.

Mit dem neuen Angular-Router können Sie [routerLinkActive]="['your-class-name']"allen Ihren Links ein Attribut hinzufügen :

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Oder das vereinfachte Nicht-Array-Format, wenn nur eine Klasse benötigt wird:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Oder ein noch einfacheres Format, wenn nur eine Klasse benötigt wird:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

Weitere Informationen finden Sie in der schlecht dokumentierten routerLinkActiveRichtlinie . (Ich habe das meistens durch Ausprobieren herausgefunden.)

UPDATE: Eine bessere Dokumentation für die routerLinkActiveRichtlinie finden Sie jetzt hier . (Danke an @Victor Hugo Arango A. in den Kommentaren unten.)

Ich habe dies in einer anderen Frage beantwortet, aber ich glaube, dass es auch für diese relevant sein könnte. Hier ist ein Link zur ursprünglichen Antwort: Winkel 2: Wie bestimme ich die aktive Route mit Parametern?

Ich habe versucht, die aktive Klasse festzulegen, ohne genau wissen zu müssen, wo sich der aktuelle Standort befindet (unter Verwendung des Routennamens) . Die beste Lösung, die ich bisher gefunden habe, ist die Verwendung der in der Klasse verfügbaren Funktion isRouteActiveRouter .

router.isRouteActive(instruction): BooleanNimmt einen Parameter, der ein InstructionRoutenobjekt ist, und gibt zurück, trueoder falseob diese Anweisung für die aktuelle Route wahr ist oder nicht. Sie können eine Route Instructionmithilfe von Router' generieren generieren (linkParams: Array) . LinkParams folgt genau demselben Format wie ein Wert, der an eine routerLink- Direktive (z router.isRouteActive(router.generate(['/User', { user: user.id }])). B. ) übergeben wird.

So könnte die RouteConfig aussehen (ich habe sie ein wenig optimiert, um die Verwendung von Parametern zu zeigen) :

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

Und die Ansicht würde so aussehen:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

Dies war bisher meine bevorzugte Lösung für das Problem, es könnte auch für Sie hilfreich sein.

Ich habe ein Problem gelöst, auf das ich in diesem Link gestoßen bin, und finde heraus, dass es eine einfache Lösung für Ihre Frage gibt. Sie können router-link-activestattdessen in Ihren Stilen verwenden.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

Kleine Verbesserung der Antwort von @ alex-corria-santos basierend auf https://github.com/angular/angular/pull/6407#issuecomment-190179875

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

Und benutze es so:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

Sie können die aktuelle Route überprüfen, indem Sie das LocationObjekt in Ihren Controller einfügen und Folgendes überprüfen path():

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

Sie müssen sicherstellen, dass Sie es zuerst importieren:

import {Location} from "angular2/router";

Sie können dann einen regulären Ausdruck verwenden, um den zurückgegebenen Pfad abzugleichen und festzustellen, welche Route aktiv ist. Beachten Sie, dass die LocationKlasse einen normalisierten Pfad zurückgibt, unabhängig davon, welchen LocationStrategySie verwenden. Also selbst wenn Sie die verwenden HashLocationStragegydie Pfade zurückgekehrt wird noch von der Form /foo/bar nicht #/foo/bar

Wie bestimmen Sie die aktuell aktive Route?

UPDATE: aktualisiert gemäß Angular2.4.x

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

Mehr sehen...

Zum Markieren können aktive Routen routerLinkActiveverwendet werden

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

Dies funktioniert auch bei anderen Elementen wie

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

Wenn Teilübereinstimmungen ebenfalls markiert werden sollen, verwenden Sie

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

Soweit ich weiß, exact: falsewird dies die Standardeinstellung in RC.4 sein

Im Moment benutze ich rc.4 mit Bootstrap 4 und dieses funktioniert perfekt für mich:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

Dies funktioniert für url: / home

Im Folgenden finden Sie die Methode, mit der RouteData verwendet wird, um Menüleistenelemente abhängig von der aktuellen Route zu formatieren:

RouteConfig enthält Daten mit Registerkarte (aktuelle Route):

@RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

Ein Stück Layout:

  <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

Klasse:

export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}

Ich dachte nur, ich würde in einem Beispiel hinzufügen, das kein Typoskript verwendet:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

Die routerLinkActiveVariable wird an eine Vorlagenvariable gebunden und bei Bedarf wiederverwendet. Leider ist die einzige Einschränkung, dass Sie nicht alles auf dem <section>Element haben können, da #homees vor dem Parser-Treffer behoben werden muss <section>.

Routerin Angular 2 definiert RC nicht mehr isRouteActiveundgenerate Methoden.

urlTree - Gibt den aktuellen URL-Baum zurück.

createUrlTree(commands: any[], segment?: RouteSegment) - Wendet eine Reihe von Befehlen auf den aktuellen URL-Baum an und erstellt einen neuen URL-Baum.

Versuchen Sie Folgendes

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

Beachten Sie, routeSegment : RouteSegmentmuss in den Konstruktor der Komponente eingefügt werden.

Hier ist ein vollständiges Beispiel für das Hinzufügen eines aktiven Routenstils in der Angular-Version, bei 2.0.0-rc.1dem Null-Root-Pfade berücksichtigt werden (zpath: '/' )

app.component.ts -> Routen

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

Lösung für Angular2 RC 4:

import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}

Ab Angular 8 funktioniert dies:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } stellt sicher, dass es mit der URL übereinstimmt.

Wenn Sie im Jahr 2020 eine aktive Klasse für ein Element festlegen möchten, das keinen [routerLink] enthält, können Sie einfach Folgendes tun:

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>

Eine weitere Problemumgehung. Viel einfacher in Angular Router V3 Alpha. durch Injektion von Router

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

Verwendung

<div *ngIf="routeIsActive('/')"> My content </div>

In Angular2 RC2 können Sie diese einfache Implementierung verwenden

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

Dadurch wird activedem Element eine Klasse mit übereinstimmender URL hinzugefügt. Weitere Informationen finden Sie hier

Nachfolgend finden Sie die Antworten auf diese Frage für alle bisher veröffentlichten Versionen von Angular 2 RC-Versionen:

RC4 und RC3 :

Zum Anwenden der Klasse auf einen Link oder einen Vorfahren des Links:

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ home sollte die URL und nicht der Name der Route sein, da die Name-Eigenschaft ab Route v3 nicht mehr auf dem Routenobjekt vorhanden ist.

Weitere Informationen zur routerLinkActive-Direktive finden Sie unter diesem Link .

Zum Anwenden der Klasse auf ein Div basierend auf der aktuellen Route:

• Injizieren Sie den Router in den Konstruktor der Komponente.
• Benutzer router.url zum Vergleich.

z.B

<nav [class.transparent]="router.url==('/home')">
</nav>

RC2 und RC1 :

Verwenden Sie eine Kombination aus router.isRouteActive und class. *. zB um eine aktive Klasse basierend auf der Home Route anzuwenden.

Name und URL können beide an router.generate übergeben werden.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>

Die Verwendung routerLinkActiveist in einfachen Fällen gut, wenn ein Link vorhanden ist und Sie einige Klassen anwenden möchten. In komplexeren Fällen, in denen Sie möglicherweise keinen RouterLink haben oder etwas mehr benötigen, können Sie eine Pipe erstellen und verwenden :

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

dann:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

und vergiss nicht, Pipe in die Pipes-Abhängigkeiten aufzunehmen;)

Für Angular Version 4+ müssen Sie keine komplexe Lösung verwenden. Sie können einfach verwenden [routerLinkActive]="'is-active'".

Ein Beispiel mit einem Bootstrap 4-Navigationslink:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

Eine Instanz der Router-Klasse ist tatsächlich eine Observable und gibt bei jeder Änderung den aktuellen Pfad zurück. So mache ich es:

export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

Und dann in meinem HTML:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

Wie in einem der Kommentare der akzeptierten Antwort erwähnt, kann die routerLinkActiveDirektive auch auf einen Container des tatsächlichen <a>Tags angewendet werden .

So zum Beispiel bei Twitter Bootstrap-Registerkarten, auf denen die aktive Klasse auf das <li>Tag angewendet werden soll , das den Link enthält:

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

Ziemlich ordentlich! Ich nehme an, die Direktive überprüft den Inhalt des Tags und sucht nach einem <a>Tag mit der routerLinkDirektive.

Einfache Lösung für Winkel 5 Benutzer ist, einfach hinzufügen routerLinkActive zum Listenelement .

Eine routerLinkActiveDirektive ist einer Route durch a zugeordnetrouterLink Direktive zugeordnet.

Als Eingabe wird ein Array von Klassen verwendet, die dem Element hinzugefügt werden, an das es angehängt ist, wenn die Route derzeit aktiv ist.

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

Mit dem obigen Befehl wird dem Ankertag eine aktive Klasse hinzugefügt, wenn derzeit die Heimatroute angezeigt wird.

Und in der neuesten Version von Angular können Sie einfach überprüfen router.isActive(routeNameAsString). Siehe zum Beispiel das folgende Beispiel:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

Und stellen Sie sicher, dass Sie nicht vergessen, den Router in Ihre Komponente einzuspritzen.

Ich suchte nach einer Möglichkeit, ein Twitter-Bootstrap-Navi mit Angular2 zu verwenden, hatte jedoch Probleme, das zu erhalten active Klasse auf das übergeordnete Element des ausgewählten Links anzuwenden. Gefunden, dass die Lösung von @ alex-corria-santos perfekt funktioniert!

Die Komponente, die Ihre Registerkarten enthält, muss den Router importieren und in seinem Konstruktor definieren, bevor Sie die erforderlichen Aufrufe tätigen können.

Hier ist eine vereinfachte Version meiner Implementierung ...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

Angenommen, Sie möchten meinem aktiven Status / Tab CSS hinzufügen. Verwenden Sie routerLinkActive , um Ihre Routing-Verbindung zu aktivieren.

Hinweis: 'aktiv' ist hier mein Klassenname

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

Ich verwende einen Winkelrouter ^3.4.7und habe immer noch Probleme mit der routerLinkActiveDirektive.

Es funktioniert nicht, wenn Sie mehrere Links mit derselben URL haben und es nicht ständig aktualisiert zu werden scheint.

Inspiriert von der Antwort von @tomaszbak habe ich eine kleine Komponente erstellt , um die Arbeit zu erledigen

Reine HTML-Vorlage wie sein

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>

Beginnen Sie mit dem Import von RouterLinkActive in Ihre .ts

{RouterLinkActive} aus '@ angle / router' importieren;

Verwenden Sie jetzt RouterLinkActive in Ihrem HTML

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

Geben Sie der Klasse "class_Name" etwas CSS. Wenn dieser Link aktiv ist / angeklickt wird, finden Sie diese Klasse während der Überprüfung in der Spanne.

Ein programmatischer Weg wäre, dies in der Komponente selbst zu tun. Ich hatte drei Wochen mit diesem Problem zu kämpfen, gab aber eckige Dokumente auf und las den eigentlichen Code, mit dem routerlinkactive funktioniert, und das sind die besten Dokumente, die ich finden kann.

    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
}

Hinweis :
Stellen Sie für die programmatische Ausführung sicher, dass Sie den Router-Link hinzufügen und ein untergeordnetes Element benötigt. Wenn Sie das ändern wollen, müssen Sie die Kinder loswerden superclass.nativeElement.