angular2路由器数据传递给子节点但不传递lazyload子节点

时间:2017-08-01 11:39:05

标签: angular angular-routing angular-router

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

为什么可以获取父数据?

我在路由器doc上找不到信息。 angular2 router

问题2: 为什么不能获得root父数据?在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 }
      },
]

危机中心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
          }
        ]
      }
    ]
  }
];

危机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“}”

2 个答案:

答案 0 :(得分:1)

问题在1个月前被问到,似乎没人按我的意愿回答,我希望这个答案可以帮助那些遇到这个问题的人。 我不是母语为英语的人,抱歉我的英语不好。

  

它按预期工作。
这些是继承参数和数据的规则:
  1.已解决的数据来自params。因此规则以同样的方式适用于参数和数据   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"}
  }
}

如果你想在CrisisListComponent中从root获取数据,只需

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 :(得分:0)

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

任何人都对这个问题感到困惑,可以看详情如下。

Router data and param should be available to children components