wake-up-neo.com

Angular: Wie kann man eine aktive Route mit Parametern bestimmen?

Ich habe diese Frage darüber gelesen, wie man die aktive Route ermittelt , aber mir ist immer noch nicht klar, wie man eine aktive Route mit Parametern bestimmt.

Im Moment mache ich es so:

<a [routerLink]="['/Profile/Feed', {username: username}]"
   [ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
   Feed for {{username}}
</a>

Und in meiner Komponente:

getLinkStyle(path:string):boolean {
  console.log(this._location.path()); // logs: '/profile/john_doe/feed'
  return this._location.path() === path;
}

Und das wird funktionieren, weil ich den Benutzernamen als Zeichenfolge weitergebe. Gibt es eine Möglichkeit, den korrekten Parameter zu übergeben?

14

Überprüfen Sie einfach die automatisch definierte Klasse router-link-active auf das Element a.

8
iuristona

Mit dem neuen, aufstrebenden Angular 2-Router (bei Version 3.0-alpha.7 während ich dies schreibe) ist es sehr einfach.

Sie müssen lediglich die [routerLinkActive]-Direktive in Ihrem Link verwenden.

<a [routerLinkActive]="['active']" [routerLink]="['/contact',  contact.id ]">
    {{contact.name}}
</a>

Dies ist, was Sie verwenden werden, wenn Angular 2 für real veröffentlicht wird und nicht länger ein Release-Kandidat ist. Ich verwende jetzt das Alpha des Routers und habe keine Probleme.

Hier ist Plunk, der es demonstriert . Sie können sehen, dass die Links rot werden, wenn Sie darauf klicken. Das ist die Anweisung, die ihnen die active-Klasse zuweist. Sie können natürlich einen beliebigen Klassennamen Ihrer Wahl verwenden. 

16
Michael Oryl

In Angular 2 ist rc1 router.isRouteActive nicht mehr vorhanden . Ich konnte nirgendwo eine funktionierende Lösung finden, aber ich konnte sie so lösen (die benutzerdefinierte Methode isActiveRoute macht den Trick):

App.component.ts:

import { Component } from '@angular/core';
import { Routes, Route, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { HomeComponent } from './home.component';
import { P1Component } from './p1.component';

@Component({
    selector: 'app',
    templateUrl: './app/app.template.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([
    { path: '/', component: HomeComponent },
    { path: '/p1', component: P1Component }
])

export class AppComponent implements OnInit {

    constructor(public router: Router){ }

    isActiveRoute(route: string) {
        return this.router.serializeUrl(this.router.urlTree) == this.router.serializeUrl((this.router.createUrlTree([route])));
    } 
}

App.template.html:

            <ul class="nav navbar-nav">
                <li [class.active]="isActiveRoute('/')">
                    <a class="nav-link" [routerLink]="['/']">Home</a>
                </li>
                <li [class.active]="isActiveRoute('/p1')">
                    <a class="nav-link" [routerLink]="['/p1']">Page 1</a>
                </li>
6
Mcanic

Ich habe versucht, das einzustellen aktiv Klasse, ohne genau wissen zu müssen, was der aktuelle Standort ist (mit dem Routennamen). Dies ist die beste Lösung, die ich bisher hatte.

So ist das RouteConfig sieht aus wie (Ich habe es ein bisschen angepasst, um so auszusehen, wie Sie es wollen):

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

Und das Aussicht 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.

5
Alex Santos

versuche dies : 

<li   class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
            <div class="ann_header_menu_left ann_profile_avatar_small"></div>
            <span>Vishnu </span>
          </li>

In Angular Version 4+ ist das Bestimmen einer aktiven Route in der Vorlage relativ einfach, da zu diesem Zweck eine eingebaute Direktive namens routerLinkActive vorhanden ist, die Sie folgendermaßen verwenden können:

      <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 title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>
0
asmmahmud

Sie können den neuen Ortungsdienst aus dem allgemeinen Angular2-Paket verwenden: https://angular.io/docs/js/latest/api/router/Location-class.html#!#path-anchor

import { Location } from '@angular/common';

...

export class YourClass {
    constructor(private _loc:Location) {}

    getCurrentPath() {
        return this._loc.path();
    }
}

Hinweis: Es ist besser, den Routerdienst zu verwenden, um Routenänderungen auszulösen. Benutzen Nur Standort, wenn Sie mit normalisierten URLs interagieren oder erstellen müssen außerhalb des Routings.

Bitte beachten Sie: Die Dokumentation besagt, Import von router, aber die neueste betta-Version, die ich habe, hat Location-Dienste in common.

0
Brian