如何以角度 5 获取当前路线数据答案

【问题标题】：How get current route data in angular 5如何以角度 5 获取当前路线数据
【发布时间】：2018-12-24 09:18:25
【问题描述】：

在我现在的情况下，我将 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，最好的方法是什么？任何想法？非常感谢！

【问题讨论】：

标签： angular typescript events routes router

【解决方案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，然后访问路由的快照。由于数据是静态的，因此您可以使用快照而不是订阅。

希望这会有所帮助。

【讨论】：

嗯，谢谢你的回答！我试过了，但只返回一个父对象！喜欢home.module的数据，和我家的孩子！如何解决这个问题？

【解决方案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
    )

【讨论】：

好吧！感谢您的回答，对不起，我需要的是第一次访问！更改路线时，我已经有了脚本。

【解决方案3】：

ActivatedRoute 有数据属性

【讨论】：

【解决方案4】：

将当前路由数据作为 rxjs 流获取的另一种方法是：

constructor(router: Router) {
    const routeData$ = router.events.pipe(
        filter(e => e instanceof ActivationEnd), 
        throttleTime(0),
        map((e: ActivationEnd) => e.snapshot.data)
    );
  }

使用 DI 获取路由器服务。
管道路由事件并过滤激活结束事件（我们可以在那里获取路由快照并获取数据属性）
限制当前堆栈的事件。如果我们有嵌套路由，事件将针对最底部的路由触发到顶部，我们只需要第一个（即当前的），因此油门将获取第一个 ActivationEnd 事件并将其推送到流中并过滤掉为当前导航休息。
然后我们从当前快照中获取数据
在订阅中（无论在哪里），您都将拥有当前路线的数据。

此外，如果我们想将来自不同路由的不同 ActivationEnd 事件的所有数据合并到一个对象中，我们也可以这样做：

constructor(router: Router) {
  router.events.pipe(
    filter(e => e instanceof ActivationEnd),
    buffer(router.events.pipe(filter(e => e instanceof NavigationEnd), debounceTime(0))),
    map((events: ActivationEnd[]) => events.reduce((acc, curr) => ({ ...acc, ...curr.snapshot.data }), {}))
  );
}

过滤掉 ActivationEnd 事件（我们在那里有路线快照，因此我们可以从中获取各个路线的数据）
缓冲它们直到我们获得当前堆栈的所有 NavigationEnd 事件
减少所有缓冲的事件并在一个对象内收集数据（不处理碰撞）

或者使用paramsInheritanceStrategy的第一个解决方案

【讨论】：