web-dev-qa-db-ja.com

角度：パラメータを使用してアクティブルートを決定する方法

アクティブなルートを決定する方法についてのこの質問 を読みましたが、それでもパラメーターを使用してアクティブなルートを決定する方法は明確ではありませんか？

今、私はこれを次のようにやっています：

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

そして私のコンポーネント内：

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

そして、ユーザー名を文字列として渡すため、これは機能します。正しいパラメーターを渡すことでこれを行う方法はありますか？

angularangular2-templateangular2-routing
15
Aico Klein Ovink

自動定義されたrouter-link-activeクラスからa要素へ。

8
iuristona

Angular= 2台のルーター（ バージョン3.0-alpha.7 でこれを書いているように））は、非常に簡単です。

必要なのは、リンクで[routerLinkActive]ディレクティブを使用することだけです。

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

これは、Angular 2が実際にリリースされ、リリース候補ではなくなったときに使用するものです。現在、ルーターのアルファを使用しており、問題はありません。

これを示すPlunkです 。リンクをクリックすると、リンクが赤くなることがわかります。それはactiveクラスをそれらに割り当てるディレクティブです。もちろん、任意のクラス名を使用できます。

18
Michael Oryl

In Angular 2 rc1 router.isRouteActiveはもう存在しません。私はどこでも実用的なソリューションを見つけることができませんでしたが、私はこのように解決することができました（カスタムメソッドisActiveRouteはトリックを行います）：

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

私は設定しようとしています アクティブ 現在の場所を正確に知る必要なくクラス （ルート名を使用）。これは私がこれまでに得た最高のソリューションです。

これが RouteConfig のように見える （あなたがやりたいことのように見えるように少し調整しました）：

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

そしてその 見る 次のようになります。

<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>

これはこれまでのところ、この問題に対する私の推奨ソリューションでしたが、あなたにとっても役立つかもしれません。

5
Alex Santos

これを試して ：

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

Angular2共通パッケージから新しいロケーションサービスを使用できます。 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();
    }
}

注：ルート変更をトリガーするには、ルーターサービスを使用することをお勧めします。ロケーションを使用するのは、ルーティング外で正規化されたURLとやり取りするか、作成する必要がある場合のみです。

注意してください：ドキュメントにはrouterからのインポートと書かれていますが、Locationサービスがある最新のbettaバージョンではcommon。

1
Brian

Angularバージョン4+では、この目的名routerLinkActiveのビルドインディレクティブがあるため、テンプレートでアクティブなルートを決定するのは非常に簡単です。次の方法を使用できます。

      <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