Angular ActivatedRoute数据返回一个空对象

时间:2017-08-17 14:06:38

标签: angular angular-routing

我有一条注册了一些数据的路线:

const routes: Routes = 
[
    {path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];

我正在尝试使用ActivatedRoute访问路径的数据:

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

@Component({...})
export class MyComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  public ngOnInit() {
    this.routeData = this.route.data.subscribe((data) => {
      console.log(data); // this is returning an empty object {}
    });
  }
}

但由于某些原因,data是一个空对象。

如何解决这个问题?

6 个答案:

答案 0 :(得分:46)

编辑:问题是我试图从 <router-outlet>之外的组件访问ActivatedRoute。所以看起来这是预期的行为。

但是我仍然认为我的答案对任何想要完成同样事情的人都有用。

<小时/> 我在GitHub上找到了一个解决方法(感谢 manklu ),我用它来完成我需要的工作:

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

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((data) => {
      if (data instanceof RoutesRecognized) {
        this.routeData = data.state.root.firstChild.data;
      }
    });
  }
}

这样做this.routeData将保存我需要的路线数据(在我的情况下是页面title)。

答案 1 :(得分:3)

我不知道所使用的版本,但是从 Angular 6 开始, 这对我有用:

(当然要感谢shinDath)

  routeData;
  ngOnInit() {
    //child route param doesnt go up to parent route params.
    this.router.events.subscribe((val) => {
      if (val instanceof ActivationEnd) {
        if(!$.isEmptyObject(val.snapshot.params)){
          this.routeData = val.snapshot.params;
        }
      }
    });
  }

答案 2 :(得分:3)

获取Angular 8)之外组件的路由自定义数据:

constructor(private router: Router) {}
    
ngOnInit() {
    this.router.events.subscribe(data => {
      if (data instanceof ActivationStart) {
        console.log(`Custom data`, data.snapshot.data);
      }
    });
  }

答案 3 :(得分:0)

这是我的代码的一部分(注意:我正在使用 Angular 8 ):

constructor(private _router: Router, private _route: ActivatedRoute) {}

ngOnInit() {
  ...
  this.listenRouting();
}

listenRouting() {
    this._router.events.subscribe((router: any) => {
      routerUrl = router.url;
      if (routerUrl && typeof routerUrl === 'string') {
        routerList = routerUrl.slice(1).split('/');
        console.log("data.breadcrumbs", this._route.snapshot.routeConfig.children.find(child => child.path === routerList[routerList.length - 1]).data.breadcrumbs);
        ...
      }
    });
}

因此数据是“隐藏”在ActivatedRoute.snapshot.routeConfig.children数组下。每个孩子除其他外还包含数据。 在我的情况下,数据是在routing.module中配置的,例如:

const routes: Routes = [
  { path: "facility-datas",
    component: FacilityTerminal,
    data: {
      breadcrumbs: "b ft"
    }
  },
...
];

答案 4 :(得分:-1)

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


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements AfterViewInit {
  paramId: string;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngAfterViewInit(): void {
    this.paramId = this.activatedRoute.snapshot.params.id;
    console.log('paramId =', this.paramId);
  }

}

答案 5 :(得分:-2)

下面应该有效:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.data);
}