Javascript 如何将路线数据导入Angular 2中的应用程序组件

我在我的应用程序路由模块中定义了一些路由数据，如下所示：

    const appRoutes:Routes = [
  {path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]

{
  path: '',
  pathMatch: 'full',
  component: NameComponent,
  data: { variableName: 'variableValue' }
},

我希望全局获取数据，以便我可以使用app.component.ts中的appRoutes来获取URL重定向相关信息，如下所示：

export class AppComponent {
  title = 'Welcome';
  constructor(public router: Router, public authenticationService: AuthenticationService) {
    this.router.events.subscribe(event => {
        console.log("Url",event.urlAfterRedirects);
        console.log("Page Name", router[PageName]); //Not working
      }

我尝试注入ActivatedRoute，但每次重定向后都无法更新

---

无论如何，我是否可以在全局

app.component.ts中配置页面名称并获取它
尝试
筛选
并循环您的事件，而不是
订阅

constructor(router:Router, route:ActivatedRoute) {
    router.events
      .filter(e => e instanceof NavigationEnd)
      .forEach(e => {
        this.title = route.root.firstChild.snapshot.data['PageName'];
    });
}

请检查以下工作演示：
如果您使用如下路由器对象静态路由：

    const appRoutes:Routes = [
  {path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]

{
  path: '',
  pathMatch: 'full',
  component: NameComponent,
  data: { variableName: 'variableValue' }
},

在ngOnInit（）上，可以使用ActivatedRoute对象恢复从路由器定义传递的数据：

ngOnInit() {
  this.localVariable = this.route.snapshot.data['variableName'];
}

Obs：我用的是角度5
 对于角度5+

此服务检索当前路由上的数据：（在我的示例中为“title”）

组件逻辑：

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";

// SERVICES
import { AppRoutingService } from "../../shared/services/app-routing.service";

@Component()
export class NavSubmenuComponent implements OnInit, OnDestroy {
  title: string = "";
  routerEvents: any;

  constructor(private router: Router, private appRoutingService: AppRoutingService ) { }

  ngOnInit() {
    this.title = this.appRoutingService.getRouteTitle();

    this.routerEvents = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(() => {
        this.title = this.appRoutingService.getRouteTitle();
      });
  }

  ngOnDestroy() {
    this.routerEvents.unsubscribe();
  }
}

如果您愿意等待ngAfterViewInit事件，则可以使用viewchild链接到路由器出口

i、 e

@ViewChild（'router'））
私有routerOutlet:routerOutlet；
ngAfterViewInit（）{
this.routerOutlet.activateEvents
.烟斗(
映射（（）=>this.routerOutlet
.activatedRouteData
)
)
.订阅（（数据）=>{
//代码
});
}


此代码由Todd Monit（谷歌开发者专家）编写，用于访问父组件或应用程序组件中的路由数据。像宝石一样工作

import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
import { filter, map, mergeMap } from 'rxjs/operators'

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.route),
    map(route => {
      while (route.firstChild) route = route.firstChild
      return route
    }),
    filter(route => route.outlet === 'primary'),
    mergeMap(route => route.data)
  ).subscribe(data =>
    console.log('data', data)
  )
}

见：

在他的示例中，他使用路由数据在应用程序组件中设置页面标题

为什么在父级中访问路由数据如此复杂，我永远也不知道
 在我的例子中，这项工作适用于angular 8：

每次激活路线时，将自动调用
中的
激活（出口）

在html中

<router-outlet (activate)='onActivate(outlet)' #outlet="outlet"></router-outlet>

别忘了进口

import {RouterOutlet} from '@angular/router';
import {map} from 'rxjs/operators';

根据Angular文档，您可以轻松地以这种方式使用它

在角11上测试


路线如下：

{
  path: 'edit/:id',
  component: MyComponent,
  data: {
    user: 1,
    otherData: 'as string'
  }
}

我在app.component.ts中添加了上述代码。我得到的值是未定义的。你能创建一个plunker吗？很难像那样帮助你。正如你看到我的工作演示工作，所以我们非常接近解决你的问题：）我道歉，这是一个有多个模块的大项目，我无法用它创建plunker。好的，我理解：）现在我看到我的示例和你的代码之间有一点不同。在
数据
属性的路由数组中，您正在使用一个数组：
数据：[{PageName:“Login Page”}]
您可以用一个对象试试我的示例：
数据：{PageName:“Login Page”}
。也许是因为这个原因，你会收到
未定义的
。这是未来angulars的更新答案，这个.route是什么的例子？你能发布stackblitz链接吗？目前为止最好的答案！此方法适用于作为正在布线的布线组件一部分的组件。这种方法在根应用程序组件本身中不起作用。当根据请求对根应用程序组件调用
ngOnInit
时，
snapshot.data
是一个空对象。仅当在
route.root.firstChild.snapshot.data['variableName']中使用root.firstChild时对我有效。
这看起来相当痛苦/令人沮丧。比如，为什么这么难？我一个人永远也想不到这一点；（哦，天哪，它确实有效。这是唯一有效的方法。我认为这可能是因为从包含出口的父组件访问主出口中的当前路由数据有点复杂，特别是考虑到可能有多个路由器的事实。但这也让我对主出口失去了一点信心。）我自己的能力。我想我会继续尝试和学习…RouterService不应该被称为ApprovingService吗？请解释一下你的代码是做什么的，以及它是如何做的。这是一个很棒的解决方案
{
  path: 'edit/:id',
  component: MyComponent,
  data: {
    user: 1,
    otherData: 'as string'
  }
}