Question

我正在尝试设置一个可以显示页面标题的导航栏。为此，我想让每条路线的数据中都带有一个参数“ navTitle”。

在我的路线模块中，我将navTitle传递给子路线健康状况。

const routes: Routes = [
  {
    path: 'health',
    loadChildren: () => import('./modules/health/health.module').then( m => m.HealthModule ),
    data: {navTitle: 'Health'}
  },
  {path: '**', pathMatch: 'full', redirectTo: '/health'}
];

但是，在路由/ health上，数据变量仍为空白。

我通过订阅ActivatedRoute并保留对navTitle的引用来加载navTitle，因为我希望它能够在其他位置进行导航。

// get the page name
    this.pageNameSub = this.route.data.subscribe(
      data => {
        this.pageName = data.navTitle;
        console.log(data)
      },
      err => this.pageName = 'App'
    )

日志语句显示数据为{}，尽管我希望它是{navTitle：'Health'}。

我也尝试将数据添加到子路由器，但是仍然没有填充。

我的主要问题是，如何将初始数据传递到Angular路线？

Answer 1

我最初的理解是，数据是可以从任何组件访问的全局变量。看来只能从声明它的路由中访问它。我向HealthComponent添加了一条log语句，并且能够记录数据。

因此，我要么需要在同一路径中包含导航栏，要么创建服务以允许设置页面标题。

为什么路径数据显示为空白？

1 个答案: