目前的文档只讨论了获取路由参数,而不是实际的路由段。
例如,如果我想找到当前路由的父,这是怎么可能的?
目前的文档只讨论了获取路由参数,而不是实际的路由段。
例如,如果我想找到当前路由的父,这是怎么可能的?
当前回答
到目前为止,我的路径如下-
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';
})
其中,路由器是ActivatedRoute的一个实例
其他回答
可以在.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
}
});
下面是我在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"
}
数据是一个对象,我们需要该对象中包含的url属性。所以我们在变量中获取这个值,我们也可以在HTML页面中使用这个变量。例如,我想显示一个div仅当用户在主页上。在这种情况下,我的路由器url值将是/home。所以我可以用下面的方式写一个div:
<div *ngIf="location == '/home'">
This is content for the home page.
</div>
Angular 2 rc2
router.urlTree.contains(router.createUrlTree(['/home']))
在angular 2.2.1中(在一个基于angar2 -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的代码。
当我想要根据路线改变背景时,我面临着这个问题。但它只在我浏览网站时工作,而不是当我刷新页面时。
在router.events.subscribe()中,这是事件。导航时的Url,刷新时的this。router。Url。
现在它起作用了:
import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
constructor(private router: Router) {}
public ngOnInit() {
this.router.events.subscribe((events:any) => {
let theme = '';
if (events instanceof NavigationStart) { theme = events.url; }
else { theme = this.router.url; }
if(theme === '/videos') { ... }
}