angular2路由器数据传递给子级,但不传递lazyload子级

angular2路由器数据传递给子级,但不传递lazyload子级,angular,angular-routing,angular-router,Angular,Angular Routing,Angular Router,问题1: 组件oninit函数使用router.data.subscribe获取数据和父数据 为什么可以获取父数据 我在路由器文件上找不到信息 问题2: 为什么无法获取根父数据?在app-router.module.ts中,我定义了 数据:{pageTitle:'youare',测试:123213213} 我无法从CrisListComponent获取数据 app-router.module.ts const routes: Routes = [ {path: '', redirectTo:

问题1: 组件oninit函数使用router.data.subscribe获取数据和父数据

为什么可以获取父数据

我在路由器文件上找不到信息

问题2: 为什么无法获取根父数据?在app-router.module.ts中,我定义了 数据:{pageTitle:'youare',测试:123213213}

我无法从CrisListComponent获取数据

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 }
      },
]
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
          }
        ]
      }
    ]
  }
];
危机中心路由.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 }
      },
]
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上,打印日志:asdfsadfsadfsadf{preload:true,you:are}

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

任何对这个问题感到困惑的人,都可以看到下面的细节


这个问题是一个月前提出的,似乎没有人回答我想要的问题,我希望这个答案能帮助那些遇到这个问题的人。 我不是以英语为母语的人,很抱歉我的英语不好

它按预期工作。以下是继承参数和数据的规则:
1.解析的数据是从参数派生的。因此,这些规则同样适用于参数和数据。 2.空路径路由继承其父路径的参数和数据。这是因为它不能有自己的参数,因为它是一个空路径路由,因此,它经常使用其父级的参数和数据作为自己的参数。 3.如果父路由是无组件路由,则任何路由都会继承其父路由的参数和数据。这是因为没有组件可以注入父级的激活路由。 没有其他东西会被继承

如果希望获取数据但不继承无组件父级,则可以使用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"}
  }
}
如果您想从CrisListComponent中的根目录获取数据,只需

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

我希望这会对你有所帮助。

1。解析的数据是从参数派生的。因此,这些规则同样适用于参数和数据。2.空路径路由继承其父路径的参数和数据。这是因为它不能有自己的参数,因为它是一个空路径路由,因此,它经常使用其父级的参数和数据作为自己的参数。3.如果父路由是无组件路由,则任何路由都会继承其父路由的参数和数据。这是因为没有组件可以注入父级的激活路由。