如何将路由数据传递给Angular 2中的App组件
如何将路由数据传递给Angular 2中的App组件
我在我的应用程序路由模块中定义了一些路由数据，如下所示：
const appRoutes:Routes = [
{path: '', component: LoginComponent, data:[{PageName:"登录页面"}]}]
我想要全局获取这些数据，以便我可以在app.component.ts中使用appRoutes来获取与URL重定向相关的信息，如下所示：
export class AppComponent {
title = '欢迎';
constructor(public router: Router, public authenticationService: AuthenticationService) {
this.router.events.subscribe(event => {
console.log("Url",event.urlAfterRedirects);
console.log("页面名称", router[PageName]); //没有起作用
}
我尝试注入ActivatedRoute，但在每次重定向后它都没有更新。
是否有任何方式可以配置页面名称并在全局的app.component.ts中获取它。
在这篇文章中，Todd Motto（Google开发者专家）编写了一段代码，用于在父组件或应用程序组件中访问路由数据。这段代码非常有效。
在他的示例中，他使用路由数据来设置应用程序组件中的页面标题。
为什么在父组件中访问路由数据如此复杂，我永远不会知道！
这看起来相当痛苦/沮丧。为什么这么难？我自己永远也想不到这个方法 ;(
天呐，它实际上起作用了。这是唯一一个起作用的方法。我想这可能是因为从包含出口的父组件中访问主要出口中的当前路由数据有点复杂，特别是如果考虑到可能存在多个路由器的情况。但这也让我对自己的能力有些失去信心。我想我会继续尝试和继续学习...
原因：
在Angular 2中，访问父组件或应用程序组件中的路由数据并不直接简单。但是，在这段代码中，Todd Motto使用了一系列的操作符和方法来获取路由数据，这可能是因为在父组件中访问子组件的路由数据需要处理多个路由器的情况，所以这段代码显得比较复杂。
解决方法：
为了解决这个问题，Todd Motto使用了`ActivatedRoute`和`Router`这两个Angular 2提供的类。他使用了`ActivatedRoute`来获取当前路由的数据，然后通过一系列的操作符和方法来处理和订阅这些数据。通过使用`filter`、`map`和`mergeMap`等方法，他成功地将路由数据传递给了父组件或应用程序组件，并在控制台中打印了这些数据。
这段代码的解决方法可能看起来有些复杂，但是它是目前唯一起作用的方法。通过理解和应用这些操作符和方法，我们可以在父组件中轻松访问并处理路由数据。这也提醒我们在学习和开发过程中保持耐心和学习的态度，因为有时候解决一个问题可能需要一些额外的努力和尝试。
问题的出现原因是在根组件中无法直接使用snapshot.data来获取路由数据。解决方法是使用route.root.firstChild来获取路由数据。下面是一篇文章。
如何在Angular 2中将路由数据传递到App组件中
在Angular 2中，我们经常需要将路由数据传递到组件中。然而，当我们在根组件中使用snapshot.data时，可能会遇到问题。本文将介绍问题的出现原因以及解决方法。
问题的出现原因是根组件中无法直接使用snapshot.data来获取路由数据。在我们定义了一个组件的路由时，我们可以使用Router对象来传递数据，如下所示：
{
path: '',
pathMatch: 'full',
component: NameComponent,
data: { variableName: 'variableValue' }
}
在组件的ngOnInit()方法中，我们可以使用ActivatedRoute对象来获取我们从路由定义中传递的数据，如下所示：
ngOnInit() {
this.localVariable = this.route.snapshot.data['variableName'];
}
然而，这种方法只适用于作为路由组件的一部分的组件。对于根组件本身，这种方法不起作用。当在根组件上调用ngOnInit()时，snapshot.data是一个空对象。
为了解决这个问题，我们可以使用route.root.firstChild来获取路由数据，如下所示：
route.root.firstChild.snapshot.data['variableName']
这种方法可以解决在根组件中获取路由数据的问题。
在Angular 2中，如果我们想要在根组件中获取路由数据，我们不能直接使用snapshot.data。我们可以使用route.root.firstChild来获取路由数据。这种方法可以解决在根组件中获取路由数据的问题。
希望本文对你有所帮助！如有任何疑问，请随时留言。
问题的原因是在Angular 2中，如何将路由数据传递给App组件。在给出的代码示例中，尝试通过过滤和循环事件来获取路由数据，但是却无法成功获取到数据。
解决方法是将路由事件的订阅替换为过滤和循环事件的方法。通过使用Angular的Router和ActivatedRoute服务，在构造函数中订阅路由事件，并使用filter和forEach方法来过滤和循环事件。然后，在事件处理函数中，通过route对象的root.firstChild.snapshot.data属性获取到路由数据的PageName属性的值。
作者提供了一个工作示例的链接，通过点击链接可以查看完整的演示。然而，作者在他的app.component.ts中添加了上述代码，但是却无法获取到正确的值，得到的是undefined。
读者建议创建一个plunker，以便更好地帮助解决问题。作者表示理解，并指出在他的示例代码和读者代码之间存在一个小差异。在读者的代码中，路由配置中的data属性使用的是一个数组，可以尝试将其修改为对象。可能是因为这个原因，导致读者无法获取到正确的值。
读者在感谢了作者的建议后，尝试将路由配置中的data属性修改为对象，并给出了一些额外的代码修改。最终，读者成功地获取到了正确的值，并表示非常感谢作者的帮助。
最后，作者提供了一个更新后的答案的链接，以便未来的Angular版本中使用。读者可以点击链接查看更多详细信息。