angular - angular - 获取不带参数的当前路由

我需要在Angular 2中找到当前路由,我找到了一种方法,用参数获得当前路由:

 
 this.router.url



 

然后分割它:


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



但是,这看起来像解决方法,我觉得应该有更好的方法吧?

时间:

来自Router的parseTree有助于在不了解任何url结构获取Fragment。


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('/');



这可以帮助你:

导入Router :


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



构造函数中的签名:


constructor(private _router: 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


 }); 



在没有查询参数的情况下获取当前路由,你可以使用下面提到的单行,this.router.url.split('?') [0 ]

在我的例子中,我需要比较以前的路由和新路由,当仅通过router.navigate更改url上的:id ,因为我想要没有不同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


 }


});




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


 }


}



另外一件事情是在尝试获得locationStrategy.path()之前确保<router-outlet>正确初始化,如果<router-outlet>未初始化任何Angular服务都无法返回URL和查询参数正确。

要确保定位策略是初始化的,可以使用subscribe方法,例如:


this.router.events.subscribe((evt) => {


...


}



但是,在这种情况下,在每个路由器更改上触发函数,这样就需要保护这种情况。

我有一个类似的要求,根据我用来获取组件的route,我想要不同的结果。

我发现activatedRoute.routeConfig.path是一个不错的选择,让我可以很容易地看到哪个路由被使用。


constructor(private activatedRoute: ActivatedRoute) {}


ngOnInit() {


 if (this.route.routeConfig.path === 'heroes/:id')



本机javascript将工作分解为逻辑部分,查看location (或window.location )"对象,例如,在url


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'



较短的语法是从@angular/common中直接使用LocationStrategy类来表示和读取路由状态,而且在获取路由器URL时更加方便。


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



export class MyComponent implements OnInit {



 constructor(private url:LocationStrategy) { }



 ngOnInit() {


 //this will log the current url


 console.log(this.url.path());


 }



}



使用.split('?')来获得最终结果。

...