0

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

为什么可以得到父数据？

我在路由器文档中找不到信息。angular2路由器

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

我无法在 CrisisListComponent 中获取数据。

应用路由器.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 }
      },
]

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

危机列表.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"}"

4

2 回答 2

1

这个问题是1个月前提出的，似乎没有人按照我的意愿回答，我希望这个答案能帮助遇到这个问题的人。我不是以英语为母语的人，抱歉我的英语不好。

它按预期工作。
这些是继承参数和数据的规则：
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"}
  }
}

如果您想从 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}
  }
}

我希望这能帮到您。

于 2017-09-07T08:48:48.250 回答
0

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

任何人都对这个问题感到困惑，可以查看以下详细信息。

路由器数据和参数应该对子组件可用

于 2017-08-07T06:24:59.193 回答