web-dev-qa-db-ja.com

パラメータなしで現在のルートを取得

Angular 2でパラメータなしで現在のルートを取得する必要があります。次のようにパラメータで現在のルートを取得する方法を見つけました。

 this.router.url

そしてそれを分割します：

 this.router.url.split(';')[0]

しかし、これは回避策のように見えますが、もっと良い方法があるはずです。

angularurlangular2-routingangular2-router
18
Sabri Aziri

parseTree from Routerは、url構造に関する知識がなくてもセグメントを取得するのに役立ちます。

import { Router } from '@angular/router';
...
constructor(private router: Router) {}
...
const urlTree = this.router.parseUrl(url);
const urlWithoutParams = urlTree.root.children['primary'].segments.map(it => it.path).join('/');

ここから始めましょう。セカンダリコンセントがある場合は、必要に応じて調整します。

28
André Werlang

クエリパラメータなしで現在のルートを取得するには、以下の単一行を使用できます。

this.router.url.split('?')[0]
11
Yanusha Cooray

これはあなたを助けることができます：

  1. インポート ルーター：

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

  2. 署名 コンストラクタ：

    constructor(private _router: Router) {}

  3. をチェック _router イベントのプロパティ：

    this._router.events
    .subscribe(
        (url:any) => {
            let _ruta = "";
            url.url.split("/").forEach(element => {
                if(element!=="" && _ruta==="")
                    _ruta="/"+element;
                });
            console.log("route: "+_ruta); //<<<---- Root path
            console.log("to URL:"+url.url); //<<<---- Destination URL 
            console.log("from URL:"+this._router.url);//<<<---- Current URL
        });
1
eberlast

ネイティブJavaScriptは、URLを論理部分に分割するために機能します。 "location"（またはwindow.location）オブジェクトをチェックアウトします。たとえば、URLでの場所の使用 https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2

location.Origin === 'https://example.com/pathname1/pathname2'
location.href === 'https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2'
location.pathname === '/pathname1/pathname2'
location.search === '?queryParam1=1&queryParam2=2'
0
Cameron Burger

受け入れ回答のようにlocationStrategyを使用しますが、.split()メソッドを使用します。 LocationStrategyは、Angular 4＆Angular 5;

_import {LocationStrategy} from '@angular/common';

export class MyService {
    constructor(private locationStrategy: LocationStrategy) {
    }

    public getUrl(filters: FilterConfig[]): void {
        const url = this.locationStrategy.path();
        const urlArray = url.split('?');

        return urlArray[0];
    }
}
_

実行すべきもう1つのことは、locationStrategy.path()を取得する前に_<router-outlet>_が適切に初期化されていることを確認することです。 _<router-outlet>_が初期化されていない場合、Angular=サービスはURLを返せず、paramsを適切にクエリできません。

ロケーション戦略が確実に初期化されるようにするには、次のようなサブスクライブメソッドを使用できます。

_this.router.events.subscribe((evt) => {
...
}
_

ただし、この場合は、ルーターの変更ごとに機能をトリガーするため、このケースが不要な場合は保護する必要があります。

0
kris_IV

私の場合、URLの：idのみをrouter.navigateで変更する場合、以前のルートと新しいルートを比較する必要がありました。異なるIDのないパスが必要だったため、ルートの元のパスを取得しました。

/* 
    Routes = [
        { path: 'main/details/:id', component: DetailComponent }
    ]

    previousRoute = '/main/details/1'
    newRoute      = '/main/details/2'
*/

this.routeSubscription = this.router.events.filter((event) => event instanceof ResolveStart)
                                           .pairwise() // returns previous and current events
                                           .subscribe((ev: [ResolveStart, ResolveStart]) => {

    let sameRoute = ev[0].state.root.firstChild.routeConfig.path == ev[1].state.root.firstChild.routeConfig.path ?
                       ev[0].state.root.firstChild.routeConfig.path : undefiend;
    if (sameRoute) {
        // Same routes, probably different ids 
        console.log(sameRoute) // gives 'main/details/:id'
    } else {
        // Different routes
    }
});
0
StinkyCat

コンポーネントを取得するために使用したルートに応じて、異なる結果が必要な同様の要件がありました。

見つけた activatedRoute.routeConfig.pathは素晴らしい選択肢であり、どのルートが使用されたかを簡単に確認できました。

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
  if (this.route.routeConfig.path === 'heroes/:id')
0
Des Horsley

これらのどれも私にとってはうまくいきませんでした。

これには多くのアプローチがありますが、この場合、ユーザーが特定のURLにアクセスするのを防ぐためにガードが設けられました。渡されたURLには常にすべてのパラメーターが含まれていたため、URLにパラメーターがある場合を除き、これは正常に機能しました。

E.G：myPage/param1/param2

または：myPage?param1=1&param2=2

この場合、myPageだけが必要です。

私は以下をコーディングしました、私はそれが好きではありません、私はそれが改善できると確信していますが、これまでに機能する他のものを見つけていません：

    let url: string = state.url;
    let urlParams: string[];

    if (url.includes("?")) {
        url = url.substr(0, url.indexOf('?'));
    } else {
        urlParams = route.url.toString().split(';')[0].split(',');

        if (urlParams.length > 1) {
            urlParams.shift(); // Remove first element which is page name

            // Get entire splitting on each param
            let fullUrlSegments: string[] = state.url.split('/');
            // Remove number of params from full URL
            fullUrlSegments = fullUrlSegments.slice(0, fullUrlSegments.length - urlParams.length);

            url = fullUrlSegments.join('/');
        }
    }

    alert(url);

state.urlはCanActivateの実装に由来します（またはRouterを挿入します）。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) Observable<boolean> { ... }
0
Ricky