Angular 2.0,如何检测子组件上的路由变化
Angular 2.0, how to detect route change on child component
如何检测子组件上的路由更改?。
这是我尝试过的方法,但我只看到应用程序组件跟踪路由更改。
我希望能够检测 url 何时从例如#/meta/a/b/c 到 MetaDetailView 组件中的#/meta/a/b/c/d。
@RouteConfig([
{ path: '/', name: 'Home', redirectTo: ['Meta']},
{ path: '/meta/...', name: 'Meta', component: MetaMainComponent, useAsDefault: true},
...other routes...,
])
export class AppComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("app.url = " + url));
}
}
@RouteConfig([
{ path: '/*other', name: 'Detail', component: MetaDetailViewComponent, useAsDefault: true},
])
export class MetaMainComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metamain.url = " + url));
console.log("MetaMainComponent")
}
}
export class MetaDetailViewComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metadetail.url = " + url));
console.log("MetaDetailViewComponent")
}
}
谢谢
杰斯帕
创建一个订阅 router
的全局服务,并在您想了解路由更改的任何地方注入该服务。该服务可以通过 Observable
本身公开更改,因此感兴趣的组件也可以订阅以自动获得通知。
您可以从任何子路由器获得 root 访问权限:
_router.root.subscribe(route => console.log('route', route));
RC3+解决方案:
constructor(private router: Router) {
router.events.subscribe(event => {
if (event.constructor.name === 'NavigationStart') {
console.log(event.url);
}
});
}
或者,您可以使用 filter
管道(RxJS 6+)过滤 NavigationStart
事件:
constructor(private router: Router) {
router.events.pipe(
filter(event => event instanceof NavigationStart),
).subscribe((event: NavigationStart) => {
console.log(event.url);
});
}
如何检测子组件上的路由更改?。 这是我尝试过的方法,但我只看到应用程序组件跟踪路由更改。 我希望能够检测 url 何时从例如#/meta/a/b/c 到 MetaDetailView 组件中的#/meta/a/b/c/d。
@RouteConfig([
{ path: '/', name: 'Home', redirectTo: ['Meta']},
{ path: '/meta/...', name: 'Meta', component: MetaMainComponent, useAsDefault: true},
...other routes...,
])
export class AppComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("app.url = " + url));
}
}
@RouteConfig([
{ path: '/*other', name: 'Detail', component: MetaDetailViewComponent, useAsDefault: true},
])
export class MetaMainComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metamain.url = " + url));
console.log("MetaMainComponent")
}
}
export class MetaDetailViewComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metadetail.url = " + url));
console.log("MetaDetailViewComponent")
}
}
谢谢 杰斯帕
创建一个订阅 router
的全局服务,并在您想了解路由更改的任何地方注入该服务。该服务可以通过 Observable
本身公开更改,因此感兴趣的组件也可以订阅以自动获得通知。
您可以从任何子路由器获得 root 访问权限:
_router.root.subscribe(route => console.log('route', route));
RC3+解决方案:
constructor(private router: Router) {
router.events.subscribe(event => {
if (event.constructor.name === 'NavigationStart') {
console.log(event.url);
}
});
}
或者,您可以使用 filter
管道(RxJS 6+)过滤 NavigationStart
事件:
constructor(private router: Router) {
router.events.pipe(
filter(event => event instanceof NavigationStart),
).subscribe((event: NavigationStart) => {
console.log(event.url);
});
}