angular2 路由器数据传递给 children 但不传递 lazyload children

Question

问题1：组件 oninit 函数使用 router.data.subscribe 获取数据和 parent 数据。

为什么可以得到parent数据？

我无法在路由器文档中找到信息。 angular2 router

问题2：为什么无法获取 root parent 数据？在 app-router.module.ts 我定义了
数据：{pageTitle：'youare'，test:123213213}，

我无法在 CrisisListComponent 获取数据。

app-router.module.ts

const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  {path: 'login', component: LoginPage},
  {
    path: ':id',
    component: MainLayoutComponent,
    data: {pageTitle: 'youare', test:123213213},
    children: [
      {
        path: 'personalcenter',
        loadChildren: 'app/personalcenter/personal-center.module#PersonalCenterModule',
        data: {pageTitle: 'personalcenter'}
      },
      {
        path: 'crisis-center',
        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
       data: { preload: true }
      },
]

crisis-center-routing.module.ts

const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    data:{you:"are"},
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent,
            canDeactivate: [CanDeactivateGuard],
            resolve: {
              crisis: CrisisDetailResolver
            }
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

crisis-list.component.ts



    export class CrisisListComponent implements OnInit {
        constructor(
        private service: CrisisService,
        private route: ActivatedRoute,
        private router: Router
      ) {}


      ngOnInit() {
        this.route.data.subscribe(data=>{
          console.log("asdfsadfsadf"+JSON.stringify(data));
        });
      }

    }

在 CrisisListComponent ，打印日志：" asdfsadfsadf{"preload":true,"you":"are"}"

Answer 1

有人解释了这个问题。 Angular2/4路由器设计的方式，如果路由器路径为空，父路由器数据将传递给子路由器。

有谁对这个问题感到困惑，可以看下面的详细内容。

Router data and param should be available to children components

Answer 2

这个问题是1个月前问的，好像没有人按我的意思回答，希望这个回答对遇到这个问题的人有所帮助。我的母语不是英语，抱歉我的英语不好。

it works as intended.
These are the rules of inheriting params and data:
1. Resolved data is derived from params. So the rules apply to params and data in the same way.
2. An empty-path route inherits its parent's params and data. This is because it cannot have its own params (it's an empty-path route), and, as a result, it often uses its parent's params and data as its own.
3. Any route inherits its parent's params and data if the parent is a componentless route. This is because there is no component that can inject the parent's activated route. Nothing else gets inherited.

如果想获取数据但不继承无组件父类，可以使用ActivatedRouteSnapshot.routeConfig，获取原始路由配置。

export class CrisisListComponent implements OnInit {
  constructor(
    private service: CrisisService,
    private route: ActivatedRoute,
    private router: Router
  ) {}
  ngOnInit() {
    console.log(this.route.snapshot.routeConfig.data) // {you:"are"}
  }
}

如果您想从 CrisisListComponent 的根目录中获取数据，只需

export class CrisisListComponent implements OnInit {
  constructor(
    private service: CrisisService,
    private route: ActivatedRoute,
    private router: Router
  ) {}


  ngOnInit() {
    console.log(this.route.root.snapshot.data) // {pageTitle: 'youare', test:123213213}
  }
}

希望对您有所帮助。

angular2 路由器数据传递给 children 但不传递 lazyload children

angular2 router data pass to children but not pass lazyload children

angular-routing

angular

angular-router