現在のルートを取得する方法
現在のドキュメントでは、実際のルートセグメントではなく、ルートパラメータの取得についてのみ説明しています。
例えば、もし私が現在のルートの親を見つけたいのなら、それはどのように可能ですか？
新しいV3ルータにはurlプロパティがあります。
this.router.url === '/login'
角型RC4：
@angular/routerからRouterをインポートできます
それを注入する：
constructor(private router: Router ) {
}
それからURLパラメータを呼び出します。
console.log(this.router.url); // /routename
あなたのコンポーネントにLocationをインジェクトし、location.path();を読みます。 Angularが モジュールにLocationを解決できるように、どこかにROUTER_DIRECTIVESを追加する必要があります。import: [RouterModule]を追加する必要があります。
更新
V3（RC.3）ルーターでは、ActivatedRouteをインジェクトし、そのsnapshotプロパティを使用して詳細にアクセスできます。
constructor(private route:ActivatedRoute) {
console.log(route);
}
または
constructor(private router:Router) {
router.events.subscribe(...);
}
新しいルータの場合> = RC.3
これを行うための最善かつ簡単な方法は！
import { Router } from '@angular/router';
constructor(router: Router) {
router.events.subscribe((url:any) => console.log(url));
console.log(router.url); // to print only path eg:"/login"
}
まだこれを探している人のために。 Angular 2.xでは、それを行う方法がいくつかあります。
constructor(private router: Router, private activatedRoute: ActivatedRoute){
// string path from root to current route. i.e /Root/CurrentRoute
router.url
// just the fragment of the current route. i.e. CurrentRoute
activatedRoute.url.value[0].path
// same as above with urlSegment[]
activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path))
// same as above
activatedRoute.snapshot.url[0].path
// the url fragment from the parent route i.e. Root
// since the parent is an ActivatedRoute object, you can get the same using
activatedRoute.parent.url.value[0].path
}
参考文献：
ルートセグメントを取得するには：
import { ActivatedRoute, UrlSegment } from '@angular/router';
constructor( route: ActivatedRoute) {}
getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }
これを使って
import { Router, NavigationEnd } from '@angular/router';
constructor(private router: Router) {
router.events.filter((event: any) => event instanceof NavigationEnd)
.subscribe(event => {
console.log(event);
});
}
そしてmain.tsインポートで
import 'rxjs/add/operator/filter';
_編集_
現代的な方法
import {filter} from 'rxjs/operators';
router.events.pipe(
filter((event: any) => event instanceof NavigationEnd)
)
.subscribe(event => {
console.log(event);
});
あなたが試すことができます
import { Router, ActivatedRoute} from '@angular/router';
constructor(private router: Router, private activatedRoute:ActivatedRoute) {
console.log(activatedRoute.snapshot.url) // array of states
console.log(activatedRoute.snapshot.url[0].path) }
代替方法
router.location.path(); this works only in browser console.
パス名を指定するwindow.location.pathname。
確実に現在のルート全体を取得するには、これを使用できます。
this.router.events.subscribe(
(event: any) => {
if (event instanceof NavigationEnd) {
console.log('this.router.url', this.router.url);
}
}
);
ネイティブのwindowオブジェクトも同様にうまくいきます
console.log('URL:' + window.location.href);
console.log('Path:' + window.location.pathname);
console.log('Host:' + window.location.Host);
console.log('Hostname:' + window.location.hostname);
console.log('Origin:' + window.location.Origin);
console.log('Port:' + window.location.port);
console.log('Search String:' + window.location.search);
注：これをサーバー側のレンダリングには使用しないでください。
ルーター がインポートされている場合はショートバージョンを使用すると、単純に次のようなものを使用できます。
this.router.url === "/ search"
それ以外の場合は、次のようにします。
1）ルーターをインポートする
import { Router } from '@angular/router';
2）コンストラクタへの登録宣言
constructor(private router: Router) { }
3）あなたの関数でその値を使う
yourFunction(){
if(this.router.url === "/search"){
//some logic
}
}
@victor answerが私を助けてくれました、これは彼と同じ答えですが、詳細は少しわかりますが、誰かに役立つかもしれないので
Angular 2 Rc 1では、RouteSegmentを挿入してナビゲートメソッドに渡すことができます。
constructor(private router:Router,private segment:RouteSegment) {}
ngOnInit() {
this.router.navigate(["explore"],this.segment)
}
Angular 2.2.1では（angular2-webpack-starterベースのプロジェクトで）これが機能します。
export class AppComponent {
subscription: Subscription;
activeUrl: string;
constructor(public appState: AppState,
private router: Router) {
console.log('[app] constructor AppComponent');
}
ngOnInit() {
console.log('[app] ngOnInit');
let _this = this;
this.subscription = this.router.events.subscribe(function (s) {
if (s instanceof NavigationEnd) {
_this.activeUrl = s.urlAfterRedirects;
}
});
}
ngOnDestroy() {
console.log('[app] ngOnDestroy: ');
this.subscription.unsubscribe();
}
}
AppComponentのテンプレートではあなたが使用することができます。 {{activeUrl}}。
このソリューションは、RouterLinkActiveのコードに触発されています。
私は使用して同じ問題を抱えていた
this.router.url
私は現在のルートをクエリパラメータで取得します。代わりにこれを使用しました。
this.router.url.split('?')[0]
本当にいい解決策ではありませんが、役に立ちます。
角度2 RC2
router.urlTree.contains(router.createUrlTree(['/home']))
これはAngular 2.3.1で私のために働いているものです。
location: any;
constructor(private _router: Router) {
_router.events.subscribe((data:any) => { this.location = data.url; });
console.warn(this.location); // This should print only path e.g. "/home"
}
dataはオブジェクトであり、そのオブジェクトに含まれるurlプロパティが必要です。そのため、その値を変数に取り込んで、HTMLページでもその変数を使用できます。たとえば、ユーザーがホームページにいるときだけdivを表示したいです。この場合、私のルータのURL値は/homeになります。だから私は次のようにdivを書くことができます：
<div *ngIf="location == '/home'">
This is content for the home page.
</div>
現在のルーターを取得するには ActivatedRoute を使用できます。
元の回答（RC版用）
AngularJS Google Group で解決策を見つけました。とても簡単です。
ngOnInit() {
this.router.subscribe((url) => console.log(url));
}
これが元の答えです
https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ
あなたの目的のためにあなたはthis.activatedRoute.pathFromRootを使うことができます。
import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){
}
PathFromRootを使用すると、親URLのリストを取得して、URLの必要な部分が自分の状態と一致するかどうかを確認できます。
追加情報については、この記事をチェックしてください http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ またはnpmからng2-router-helperをインストールしてください。
npm install ng2-router-helper
現在のルートの親を見つけるために、相対ルートを使って、ルータからUrlTreeを取得できます。
var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});
次に、一次コンセントのセグメントを取得します。
tree.root.children[PRIMARY_OUTLET].segments;
今のところ、私は次のように私の道を得ています -
this.router.url.subscribe(value => {
// you may print value to see the actual object
// console.log(JSON.stringify(value));
this.isPreview = value[0].path === 'preview';
})
routerは のインスタンスです。ActivatedRoute
これは簡単です、角度2ではあなただけをインポートする必要があります ルーター このようなライブラリ：
import { Router } from '@angular/router';
次に、コンポーネントまたはサービスのコンストラクタで、このようにインスタンス化する必要があります。
constructor(private _router: 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
});
WAY 1 ：Angularを使用した場合： this.router.url
import { Component } from '@angular/core';
// Step 1: import the router
import { Router } from '@angular/router';
@Component({
template: 'The href is: {{href}}'
/*
Other component settings
*/
})
export class Component {
public href: string = "";
//Step 2: Declare the same in the constructure.
constructor(private router: Router) {}
ngOnInit() {
this.href = this.router.url;
// Do comparision here.....
///////////////////////////
console.log(this.router.url);
}
}
WAY 2 Window.location、Javascriptの場合と同様、ルーターを使用したくない場合
this.href= window.location.href;
に基づいて子コンポーネントを表示するには、ユーザーがアプリ内を移動するまたはURLにアクセスする（または特定のURLを更新する）のときにURLパスが必要な問題に直面しました。 URL.
さらに、テンプレートで使用できるObservableが欲しいので、router.urlはオプションではありませんでした。ルーティングはコンポーネントのテンプレートが初期化される前に起動されるため、router.eventsサブスクリプションも無効です。
this.currentRouteURL$ = this.router.events.pipe(
startWith(this.router),
filter(
(event) => event instanceof NavigationEnd || event instanceof Router
),
map((event: NavigationEnd | Router) => event.url)
);
幸運を祈っています。
router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
this.currentUrl = e.url;
}
});this.router.events.subscribe((val) => {
const currentPage = this.router.url; // Current page route
const currentLocation = (this.platformLocation as any).location.href; // Current page url
});
これはあなたの答えかもしれません、アクティブ化されたルートのparamsメソッドを使用して、読みたいURL /ルートからパラメータを取得します、以下はデモスニペットです
import {ActivatedRoute} from '@angular/router';
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params => {
this.yourVariable = params['required_param_name'];
});
}
}
.tsファイルで使用できます
import { Route, Router, NavigationStart } from '@angular/router';
constructor(private router: Router) {}
this.router.events.subscribe(value => {
if (value instanceof NavigationStart) {
console.log(value) // your current route
}
});
現在のURLにアクセスする必要がある場合は、通常、NavigationEndまたはNavigationStartが何かを実行するのを待つ必要があります。あなただけのルーターイベントを購読している場合、購読はルートライフサイクルで多くのイベントを出力します。代わりに、RxJS演算子を使用して、必要なイベントのみをフィルタリングしてください。これの有益な副作用は今私達がより厳密なタイプを持っているということです！
constructor(private router: Router) {
router.events.pipe(
filter(ev => (ev instanceof NavigationEnd))
).subscribe((ev: NavigationEnd) => {
console.log(ev.url);
});
}
コンポーネントファイル内：
import {ActivatedRouteSnapshot} from '@angular/router';
constructor(state: ActivatedRouteSnapshot) {
console.log(state.path)
}
ルーティングファイル内：
import {ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){
console.log(this.route.routeConfig.path);
}