blocks|key|4443070|text|新的V3路由器具有url属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443071|this.router.url+===+'/login'|code-block|syntax|javascript|4443072|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The new V3 router has a url property.

<pre><code>this.router.url === '/login'
</code></pre>

blocks|key|4443088|text|Angular+RC4：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443089|您可以从@angular/router导入Router|offset|length|style|CODE|4443090|然后注入它：|4443091|constructor(private+router:+Router+)+{

}|code-block|syntax|javascript|4443092|然后调用它的URL参数：|4443093|console.log(this.router.url);+//++/routename|4443094|entityMap^0|0|4|F|L|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Angular RC4:

You can import <code>Router</code> from <code>@angular/router</code>

Then inject it:

<pre><code>constructor(private router: Router ) {

}
</code></pre>

Then call it's URL parameter:

<pre><code>console.log(this.router.url); // /routename
</code></pre>

blocks|key|4443209|text|要可靠地获得完整的当前路由，您可以使用以下命令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443210|this.router.events.subscribe(
++(event:+any)+=>+{
++++if+(event+instanceof+NavigationEnd)+{
++++++console.log('this.router.url',+this.router.url);
++++}
++}
);|code-block|syntax|javascript|4443211|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To reliably get the full current route you can use this

<pre><code>this.router.events.subscribe(
 (event: any) =&gt; {
 if (event instanceof NavigationEnd) {
 console.log('this.router.url', this.router.url);
 }
 }
);
</code></pre>

blocks|key|4443469|text|import+{+Router+}+from+'@angular/router';
constructor(router:+Router)+{+
++++++console.log(router.routerState.snapshot.url);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4443470|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import { Router } from '@angular/router';
constructor(router: Router) { 
 console.log(router.routerState.snapshot.url);
}
</code></pre>

blocks|key|4443121|text|您可以尝试使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443122|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)+}|code-block|syntax|javascript|4443123|另一种方式|4443124|router.location.path();+++this+works+only+in+browser+console.+|4443125|给出路径名的window.location.pathname。|offset|length|style|CODE|4443126|entityMap^0|0|0|0|0|6|O|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can try with 

<pre><code>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) }
</code></pre>

Alternative ways

<pre><code>router.location.path(); this works only in browser console. 
</code></pre>

<code>window.location.pathname</code> which gives the path name.

blocks|key|4443400|text|本机window对象也工作得很好|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443401|console.log('URL:'+%2B+window.location.href);
console.log('Path:'+%2B+window.location.pathname);
console.log('Host:'+%2B+window.location.host);
console.log('Hostname:'+%2B+window.location.hostname);
console.log('Origin:'+%2B+window.location.origin);
console.log('Port:'+%2B+window.location.port);
console.log('Search+String:'+%2B+window.location.search);|code-block|syntax|javascript|4443402|注意:不要在服务器端渲染中使用此选项|4443403|entityMap^0|2|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

The native <code>window</code> object works fine as well

<pre><code>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);
</code></pre>

NOTE: DO NOT USE THIS IN SERVER SIDE RENDERING

blocks|key|4443325|text|我也遇到了同样的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443326|this.router.url|code-block|syntax|javascript|4443327|我得到带有查询参数的当前路由。我做的一个变通方法是使用下面的代码：|4443328|this.router.url.split('?')[0]|4443329|这不是一个很好的解决方案，但很有帮助。|4443330|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had the same problem using 

<pre><code>this.router.url
</code></pre>

I get the current route with query params. A workaround I did was using this instead:

<pre><code>this.router.url.split('?')[0]
</code></pre>

Not a really nice solution, but helpful.

blocks|key|4443602|text|如果您将其与authguard一起使用，则此方法适用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443603|this.router.events.subscribe(event+=>+{
++++++++if(event+instanceof+NavigationStart){
++++++++++++console.log('this+is+what+your+looking+for+',+event.url);++
+++++++++}
+++++++}+
+++);|code-block|syntax|javascript|4443604|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This applies if you are using it with an authguard
<pre><code>this.router.events.subscribe(event =&gt; {
 if(event instanceof NavigationStart){
 console.log('this is what your looking for ', event.url); 
 }
 } 
 );
</code></pre>

blocks|key|4443244|text|使用angular+2.2.1+(在基于Angular2-+works+starter的项目中)工作如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443245|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();
++}
}|code-block|syntax|javascript|4443246|在AppComponent的模板中，您可以使用{{activeUrl}}。|4443247|这个解决方案的灵感来自于RouterLinkActive的代码。|4443248|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

With angular 2.2.1 (in an angular2-webpack-starter based project) works this:

<pre><code>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();
 }
}
</code></pre>

In AppComponent's template you can use e.g. {{activeUrl}}.

This solution is inspired by RouterLinkActive's code.

blocks|key|4443460|text|import+{+Router,+NavigationEnd+}+from+"@angular/router";

constructor(private+router:+Router)+{
++//+Detect+current+route
++router.events.subscribe(val+=>+{
++++if+(val+instanceof+NavigationEnd)+{
++++++console.log(val.url);
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4443461|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import { Router, NavigationEnd } from "@angular/router";

constructor(private router: Router) {
 // Detect current route
 router.events.subscribe(val =&gt; {
 if (val instanceof NavigationEnd) {
 console.log(val.url);
 }
});
</code></pre>

blocks|key|4443509|text|要获得angular+8中的当前路由器，只需执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443510|import+{ActivatedRoute}+from+'@angular/router';|code-block|syntax|javascript|4443511|然后将其注入构造函数中，如下所示|4443512|constructor(private+route:+ActivatedRoute){}|4443513|如果您想获取当前路由，请使用此route.url|offset|length|style|CODE|4443514|如果您有多个名称路由，如/home/pages/list，且您想访问单个路由，则可以像下面这样访问每个route.url.value[0].path|4443515|value[0]会给你主页，value[1]会给你页面，value[2]会给你列表|4443516|entityMap^0|0|0|0|0|F|9|0|C|G|1F|N|0|0|8|E|8|S|8|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@$M|14|N|15|O|P]|$M|16|N|17|O|P]]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@$M|19|N|1A|O|P]|$M|1B|N|1C|O|P]|$M|1D|N|1E|O|P]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$]]

to get current router in angular 8 just do this
<pre><code>import {ActivatedRoute} from '@angular/router';
</code></pre>
then inject it in constructor like
<pre><code>constructor(private route: ActivatedRoute){}
</code></pre>
if you want get current route then use this <code>route.url</code>
if you have multiply name route like <code>/home/pages/list</code> and you wanna access individual then you can access each of like this <code>route.url.value[0].path</code>
<code>value[0]</code> will give home, <code>value[1]</code> will give you pages and <code>value[2]</code> will give you list

blocks|key|4443721|text|如果您不能访问router.url+(例如，如果您使用的是skipLocationChange)，则可以使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443722|constructor(private+readonly+location:+Location)+{}

ngOnInit():+void+{
++console.log(this.location.path());
}|code-block|syntax|javascript|4443723|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

An easier way if you can't access router.url (for instance if you used skipLocationChange) you can use the following :
<pre><code>constructor(private readonly location: Location) {}

ngOnInit(): void {
 console.log(this.location.path());
}
</code></pre>

blocks|key|4442818|text|在Angular2+Rc1中，您可以注入RouteSegment，然后将其传递给.navigate()方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4442819|constructor(private+router:Router,private+segment:RouteSegment)+{}

ngOnInit()+{
++this.router.navigate(["explore"],this.segment)
}|code-block|syntax|javascript|4442820|entityMap^0|K|C|14|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

In Angular2 Rc1 you can inject a <code>RouteSegment</code> and then pass it into the <code>.navigate()</code> method:
<pre><code>constructor(private router:Router,private segment:RouteSegment) {}

ngOnInit() {
 this.router.navigate([&quot;explore&quot;],this.segment)
}
</code></pre>

blocks|key|4443452|text|您可以在.ts文件中使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443453|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
++++++}
++++});|code-block|syntax|javascript|4443454|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use in the .ts file

<pre><code>import { Route, Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {}

this.router.events.subscribe(value =&gt; {
 if (value instanceof NavigationStart) {
 console.log(value) // your current route
 }
 });
</code></pre>

blocks|key|4443050|text|angular+2+rc2|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443051|router.urlTree.contains(router.createUrlTree(['/home']))|code-block|syntax|javascript|4443052|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

angular 2 rc2

<pre><code>router.urlTree.contains(router.createUrlTree(['/home']))
</code></pre>

blocks|key|4443031|text|下面是在Angular+2.3.1中为我工作的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443032|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"
}|code-block|syntax|javascript|4443033|data是一个对象，我们需要包含在该对象中的url属性。因此，我们在一个变量中捕获该值，也可以在HTML页面中使用该变量。例如，我希望仅当用户在主页上时才显示div。在本例中，我的路由器URL值将为/home。所以我可以用下面的方式写一个div：|offset|length|style|CODE|4443034|<div+*ngIf="location+==+'/home'">
This+is+content+for+the+home+page.
</div>|4443035|entityMap^0|0|0|0|4|M|3|2R|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

Here is what is working for me in Angular 2.3.1. 

<pre><code>location: any;

constructor(private _router: Router) { 

 _router.events.subscribe((data:any) =&gt; { this.location = data.url; });

 console.warn(this.location); // This should print only path e.g. "/home"
}
</code></pre>

The <code>data</code> is an object and we need the <code>url</code> property contained in that object. So we capture that value in a variable and we can use that variable in our HTML page as well. For example, I want to show a div only when user is on Home page. In this case, my router url value will be <code>/home</code>. So I can write a div in the following way:

<pre><code>&lt;div *ngIf="location == '/home'"&gt;
This is content for the home page.
&lt;/div&gt;
</code></pre>

blocks|key|4443399|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443400|router.events.subscribe(e+=>+{
++++++if+(e+instanceof+NavigationEnd)+{
++++++++this.currentUrl+=+e.url;
++++++}
++++});|code-block|syntax|javascript|4443401|4443402|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>router.events.subscribe(e =&gt; {
 if (e instanceof NavigationEnd) {
 this.currentUrl = e.url;
 }
 });</code></pre>
</div>
</div>

blocks|key|4443159|text|出于您的目的，您可以使用this.activatedRoute.pathFromRoot。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443160|import+{ActivatedRoute}+from+"@angular/router";
constructor(public+activatedRoute:+ActivatedRoute){

}|code-block|syntax|javascript|4443161|在pathFromRoot的帮助下，您可以获得父URL的列表，并检查该URL的所需部分是否与您的条件匹配。|4443162|有关更多信息，请查看本文路由器或从npm安装ng2-+http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/+-helper|4443163|npm+install+ng2-router-helper|4443164|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/^0|C|W|0|0|0|R|1X|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|P|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

For your purposes you can use <code>this.activatedRoute.pathFromRoot</code>.

<pre class="lang-js prettyprint-override"><code>import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){

}
</code></pre>

With the help of pathFromRoot you can get the list of parent urls and check if the needed part of the URL matches your condition.

For additional information please check this article <a href="http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/" rel="nofollow noreferrer">http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/</a>
or install ng2-router-helper from npm

<pre><code>npm install ng2-router-helper
</code></pre>

blocks|key|4443357|text|要查找当前路由的父路由，您可以使用相对路由从路由器获取UrlTree：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443358|var+tree:UrlTree+=+router.createUrlTree(['../'],+{relativeTo:+route});|code-block|syntax|javascript|4443359|然后获取主插座的网段：|4443360|tree.root.children[PRIMARY_OUTLET].segments;|4443361|entityMap^0|R|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

To find the parent of the current route, you can obtain the <code>UrlTree</code> from the router, using relative routes:

<pre><code>var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});
</code></pre>

Then to get the segments of the primary outlet: 

<pre><code>tree.root.children[PRIMARY_OUTLET].segments;
</code></pre>

blocks|key|4443792|text|最简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443793|import+{+Router+}+from+'@angular/router';
constructor(router:+Router)+{+
++++++router.events.subscribe((url:any)+=>+console.log(url));
++++++console.log(router.url);++<----------+to+get+only+path+eg:"/signUp"
}|code-block|syntax|javascript|4443794|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

simplest way
<pre><code>import { Router } from '@angular/router';
constructor(router: Router) { 
 router.events.subscribe((url:any) =&gt; console.log(url));
 console.log(router.url); &lt;---------- to get only path eg:&quot;/signUp&quot;
}
</code></pre>

blocks|key|4443417|text|this.router.events.subscribe((val)+=>+{
+++const+currentPage+=+this.router.url;+//+Current+page+route
++const+currentLocation+=+(this.platformLocation+as+any).location.href;+//+Current+page+url
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4443418|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>this.router.events.subscribe((val) =&gt; {
 const currentPage = this.router.url; // Current page route
 const currentLocation = (this.platformLocation as any).location.href; // Current page url
});
</code></pre>

blocks|key|4443290|text|如果你需要访问当前的url，通常你必须等待NavigationEnd或NavigationStart来做一些事情。如果您只是订阅路由器事件，则订阅将在路由生命周期中输出许多事件。相反，可以使用RxJS运算符来仅筛选所需的事件。这样做的好处是我们现在有了更严格的类型！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443291|constructor(private+router:+Router)+{
++++router.events.pipe(
++++++filter(ev+=>+(ev+instanceof+NavigationEnd))
++++).subscribe((ev:+NavigationEnd)+=>+{
++++++console.log(ev.url);
++++});
}|code-block|syntax|javascript|4443292|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you need to access the current url, usually you have to wait for NavigationEnd or NavigationStart to do something. If you just subscribe to the router events the subscription will output many events in the route lifecycle. Instead, use an RxJS operator to only filter for the Event you need. The beneficial side effect of this is now we have stricter types!

<pre><code>constructor(private router: Router) {
 router.events.pipe(
 filter(ev =&gt; (ev instanceof NavigationEnd))
 ).subscribe((ev: NavigationEnd) =&gt; {
 console.log(ev.url);
 });
}

</code></pre>

blocks|key|4443209|text|这可能是你的答案，使用params方法激活路由从你想要读取的URL/路由中获取参数，下面是演示片段|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443210|import+{ActivatedRoute}+from+'@angular/router';+
@Component({
})
export+class+Test{
constructor(private+route:+ActivatedRoute){
this.route.params.subscribe(params+=>+{
+++++++++++++this.yourVariable+=+params['required_param_name'];
++++++++});
++++}
}|code-block|syntax|javascript|4443211|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this could be your answer, use params method of activated route to get paramter from URL/route that you want to read, below is demo snippet

<pre><code>import {ActivatedRoute} from '@angular/router'; 
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params =&gt; {
 this.yourVariable = params['required_param_name'];
 });
 }
}
</code></pre>

blocks|key|4443606|text|import+{ActivatedRoute}+from+'@angular/router';
constructor(private+route:ActivatedRoute){
++++console.log(this.route.routeConfig.path);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4443607|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import {ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){
 console.log(this.route.routeConfig.path);
}
</code></pre>

blocks|key|4443646|text|这个是在Angular+11上测试的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443647|constructor(private+router:+Router)+{
++this.router.events
+++.pipe(filter((event:+any)+=>+event+instanceof+NavigationEnd))
+++.subscribe((event:+any)+=>+{
+++++this.currentRoute+=+event.url;
+++++console.log(event);
+++});
+}|code-block|syntax|javascript|4443648|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This one is tested on Angular 11
<pre><code>constructor(private router: Router) {
 this.router.events
 .pipe(filter((event: any) =&gt; event instanceof NavigationEnd))
 .subscribe((event: any) =&gt; {
 this.currentRoute = event.url;
 console.log(event);
 });
 }
</code></pre>

blocks|key|4443843|text|对我来说，当访问AuthGuardService+implements+CanActivate中的当前路由时，被接受的答案不起作用，因为路由还没有完全处理。我在这里回答了同样的问题(https://stackoverflow.com/a/68541653/1479486)，但如果你只想从这里复制粘贴，这是我的解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443844|const+finalUrl+=+this.router.getCurrentNavigation()?.finalUrl;+++
const+isLoginPage+=+finalUrl?.root.children['primary'].segments[0]?.path+===+'login';+|code-block|syntax|javascript|4443845|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/68541653/1479486^0|8|13|2J|18|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

For me the accepted answer did not work when accessing the current route within <code>AuthGuardService implements CanActivate</code> since the route isn't fully processed yet. I answered the same question here (<a href="https://stackoverflow.com/a/68541653/1479486">https://stackoverflow.com/a/68541653/1479486</a>) but if you just want to copy paste from here, this is my solution:
<pre><code>const finalUrl = this.router.getCurrentNavigation()?.finalUrl; 
const isLoginPage = finalUrl?.root.children['primary'].segments[0]?.path === 'login'; 
</code></pre>

blocks|key|4443571|text|在组件文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443572|import+{ActivatedRouteSnapshot}+from+'@angular/router';

constructor(state:+ActivatedRouteSnapshot)+{
++++console.log(state.path)
}|code-block|syntax|javascript|4443573|在路由文件中：|4443574|​|4443575|📷|atomic|offset|length|4443576|4443577|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/60e63b0a49748fed890b5284f04e6322.png|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|13|8|@]|9|@$N|14|O|15|1|16]]|A|$]]|$1|P|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

in component file:

<pre><code>import {ActivatedRouteSnapshot} from '@angular/router';

constructor(state: ActivatedRouteSnapshot) {
 console.log(state.path)
}
</code></pre>

in routeing file:

<a href="https://i.stack.imgur.com/l6yMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l6yMZ.png" alt="enter image description here"></a>

The current docs only talk about getting route params, not the actual route segments.

For example, if i want to find the parent of current route, how is that possible?

How to get current route

目前的文献只讨论了路径参数的获取，而不是实际的路径段。例如，如果我想查找当前路由的父路由，这怎么可能呢？

问如何获取当前路由
EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取当前路由EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取当前路由
EN