Question

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

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

我想全局获取数据，以便我可以在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中获取它。

Answer 1

尝试filter并循环播放您的活动，而不是subscribe

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

请查看以下工作演示：https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info

Answer 2

如果您使用如下所示的Router对象进行静态路由：

{path：''，pathMatch：'full'，component：NameComponent，data：{variableName：'variableValue'}}，

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

ngOnInit（）{ this.localVariable = this.route.snapshot.data ['variableName']; }

Obs：我正在使用Angular 5！

Answer 3

此代码是由Todd Motto（Google开发人员专家）编写的，用于访问父组件或应用程序组件中的路由数据。就像宝石一样。

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)
  )
}

请参阅：https://ultimatecourses.com/blog/dynamic-page-titles-angular-2-router-events

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

为什么在父级中访问路由数据是如此复杂，我永远不会知道！

Answer 4

就我而言，这适用于 angular 8：

每次激活路由时都会自动调用 onActivate(outlet) 中的

<router-outlet>。

在 html 中

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

在组件中

onActivate(outlet: RouterOutlet) {
    outlet.activatedRoute.data.pipe(map(data => console.log('Router data', data))).toPromise().then();
  }

不要忘记导入

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

Answer 5

如果您愿意等到ngAfterViewInit事件，则可以使用viewchild链接到路由器插座。

即

  @ViewChild('router')
  private routerOutlet: RouterOutlet;

  ngAfterViewInit() {
    this.routerOutlet.activateEvents
      .pipe(
        map(() => this.routerOutlet
          .activatedRouteData
        )
      )
    .subscribe((data) => {
        // Code 
    });
  }

<router-outlet #router="outlet"></router-outlet>

Answer 6

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

在 Angular 11 上测试过。

https://angular.io/api/router/ActivatedRouteSnapshot#description

@Component({templateUrl:'./my-component.html'})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: string = route.snapshot.params.id;
    const url: string = route.snapshot.url.join('');
    const user = route.snapshot.data.user;
  }
}

路线如下：

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

Answer 7

export class AppComponent implements OnInit, OnDestroy{
  title = 'Welcome';
  private paramsSubscription;

  constructor(public router: Router,
              private activatedRoute: ActivatedRoute,
              public authenticationService: AuthenticationService) {}


public ngOnInit() {
     this.paramsSubscription = this.activatedRoute.params
      .subscribe((params) => {
        console.log("Page Name", params['PageName']);
      }        
 }

// Unsubscribe route params to avoid memmory leaks
public ngOnDestroy() {
     this.paramsSubscription.unsubscribe();
 }

如何在Angular 2中将路径数据导入App组件

7 个答案: