如何获得角度为5的当前路线数据

Question

在我的情况下,我放入data object了我的延迟加载组件,我想获取data内容并在html中显示.但我不能这样做.这是脚本:

const routes: Routes = [
    {
        path: '',
        component: CancellationComponent,
        data: {
            animation: 'cancellation',
            title: 'Cancelamento de contratos'
        },
        resolve: {
            data: CancellationResolveService
        }
    }
];

该组件由Lazy Load.我想要的是,当我直接访问时#/cancellation,我想得到的data content,最好的方法是什么？任何的想法？非常感谢!

Answer 1

您可以从快照访问路径的数据属性,如下所示:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    templateUrl: './app/home/welcome.component.html'
})
export class WelcomeComponent implements OnInit {
    public pageTitle: string;

    constructor( private route: ActivatedRoute) {
    } 

    ngOnInit(): void {
     this.pageTitle = this.route.snapshot.data['title'];
  }

}

这需要注入ActivatedRoute,然后访问路径的快照.由于数据是静态的,因此您可以使用快照而不是订阅.

希望这可以帮助.

Answer 2

取决于你想在哪里使用它，但如果它被提升，你可以尝试：

constructor(private router: Router,
            private activatedRoute: ActivatedRoute)

您将检测路线的每次变化并获取路线中的数据。

router.events.pipe(
      filter(event => event instanceof NavigationEnd), // Only get the event of NavigationEnd
      map(() => activatedRoute), // Listen to activateRoute
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      filter(route => route.outlet === 'primary'),
      mergeMap(route => route.data)  // get the data
    )