Question

以下是我的路线示例 { path: 'calendar', component: CalendarComponent, canActivate: [CanActivateViaAuthGuard], data: { title: 'Calendar' } },

我想在路由器更改事件中获取数据。以下是我的活动，

this._router.events
.filter(event => event instanceof RoutesRecognized)
.subscribe((event: any) => {})

我可以通过以下方式获取数据，

event.state._root.children[0].value._routeConfig.data

我认为这不是获取数据的正确方法。 在此处获取数据的正确方法是什么？

基本上我想设置页面的标题，所以当我在日历页面时，我的HTML页面标题应该有'日历'。我不希望在每个页面中都完成此代码。所以我正在制作一个通用组件，它可以从每个路径获取数据并更改页面标题。

修改

我总是可以在组件本身获取数据，但这将是多余的。我将不得不在每个组件中编写代码来设置标题。我希望这个练习在一个地方完成，所以我在组件中避免。

Answer 1

您可以在路径中将数据作为参数发送。然后你的路线看起来像这样：

{ path: 'calendar/:title', component: CalendarComponent }

在日历组件中，您可以像这样订阅此参数

ngOnInit() {
  this.route.params.subscribe(params => {
    var title = params['title'];
    ...
  });
}

每次参数更改时，都会调用您的函数。

Answer 2

适用于Angular 4 +

如果要访问已为其定义路径自定义数据的子级别或较低级别组件的路径自定义数据，则可以在该组件中执行以下操作，并考虑到您正在传递路径自定义数据File##{jobParameters[rundate]} File#{'#' + jobParameters[rundate]} File${'#'}#{jobParameters[rundate]} File#{'#'}#{jobParameters[rundate]}：

data: {title: 'somedata'}

但是，如果您想从父级或上级组件全局访问路径自定义数据以访问路径自定义数据中的更改，那么您必须监听路由器事件，特别是public constructor(private route:ActivatedRoute, private router:Router) { console.log(route.snapshot.data['title']); }或RoutesRecognized事件。我要用NavigationEnd显示两个带有两个事件的程序：

第一种方法：

AppComponent

第二种方法正在使用：

export class AppComponent implements OnInit, AfterViewInit { constructor(private activatedRoute: ActivatedRoute, private router: Router) { } ngOnInit() { this.router .events .filter(event => event instanceof NavigationEnd) .map(() => { let child = this.activatedRoute.firstChild; while (child) { if (child.firstChild) { child = child.firstChild; } else if (child.snapshot.data && child.snapshot.data['custom_data']) { return child.snapshot.data['custom_data']; } else { return null; } } return null; }).subscribe( (customData: any) => { console.log(customData); }); } }

注意：即使最后一个较短且通常有效，但是，如果您有嵌套路线，则鼓励使用第一个。

Angular 2如何在更改事件

2 个答案: