Angular ActivatedRoute 데이터가 빈 개체를 반환함

Angular ActivatedRoute 데이터가 빈 개체를 반환함

일부 데이터에 등록된 경로가 있습니다.

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 {
  private routeData;

  constructor(private route: ActivatedRoute) {}

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

하지만 어떤 이유로data빈 개체입니다.

이 문제를 어떻게 해결합니까?

편집: 문제는 외부에 있는 구성 요소에서 활성화된 경로에 액세스하려고 했다는 것입니다.<router-outlet>그래서 이것이 의도된 행동인 것처럼 보입니다.

하지만 저는 여전히 아래의 답변이 같은 일을 성취하려고 노력하는 모든 사람에게 유용할 수 있다고 생각합니다.

---

I found a workaround on GitHub (thanks 맨클루) that I used in order to accomplish what I needed:

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

<router-outlet> 외부 구성 요소에 대한 경로 사용자 지정 데이터 가져오기(Angular 8):

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

사용된 버전은 모르겠지만 Angular 6 이후로 이것은 저에게 효과가 있었습니다.

(물론 신다스 덕분입니다)

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

다음은 내 코드의 일부입니다(참고: 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.childrenArray 아래에 "숨깁니다.각각의 아이들은 무엇보다도 데이터를 포함하고 있습니다.내 경우 데이터는 routing.module에 구성됩니다. 예:

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

Angular 기여자의 답변, 링크

this.router.events.pipe(
    filter((e) => e instanceof NavigationEnd),
    map(() => {
        let route = this.activatedRoute;

        while (route.firstChild) {
            route = route.firstChild;
        }

        return route;
    }),
    filter((route) => route.outlet === 'primary'),
    mergeMap((route) => route.data),
    tap(console.log)
);

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

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

}

다음과 같이 작동해야 합니다.

constructor(private route: ActivatedRoute) {}

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

언급URL : https://stackoverflow.com/questions/45737375/angular-activatedroute-data-returns-an-empty-object