5

我想从父组件获取子路由数据（'layout'）ActivatedRoute。我已经尝试了以下示例，并且我能够获得我正在寻找的数据，但只能获得一次。在子路线更改期间，我看不到更新的“布局”值。

路线

const routes: Routes = [
  {
    path: '',
    component: Layout1Component,
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadChildren: './pages/analytics/analytics.module#AnalyticsModule',
        data: {
          layout: 'boxed'
        }
      },
      {
        path: 'files',
        loadChildren: './pages/files/files.module#FilesModule',
        data: {
          layout: 'full'
        }
      }
    ]
  }
];

布局1组件

export class Layout1Component implements OnInit {
  constructor(private service: AppService, route: ActivatedRoute) {
    this.layout = route.snapshot.firstChild.data['layout'];

    route.url.subscribe(() => {
      console.log(route.snapshot.firstChild.data['layout']);
    });
  }
}

我希望每次更改路线时都使用更新的“布局”值打印 console.log。

请帮我解决这个问题。

4

2 回答 2

7

据我了解，您仅获取一次数据的原因是因为在实例化时将其作为BehaviorSubjectActivatedRoute获取。url

function createActivatedRoute(c: ActivatedRouteSnapshot) {
  return new ActivatedRoute(
      new BehaviorSubject(c.url), new BehaviorSubject(c.params), new BehaviorSubject(c.queryParams),
      new BehaviorSubject(c.fragment), new BehaviorSubject(c.data), c.outlet, c.component, c);
}

这是上述代码段的链接

这意味着当您订阅时，您只会获得第一个存储值。

解决它的一种方法是利用路由器事件。

假设你有这样的事情：

const routes: Route[] = [
  { 
    path: '', 
    component: HelloComponent,
    children: [
      {
        path: 'foo',
        loadChildren: () => import('path/to/foo').then(m => m.FooModule),
        data: {
          name: 'andrei'
        }
      },
      {
        path: 'bar',
        loadChildren: () => import('path/to/bar').then(m => m.BarModule),
        data: {
          name: 'john'
        }
      },
    ]
  },
]

这是一个可能的解决方案：

 constructor (private router: Router, private route: ActivatedRoute) { }

 ngOnInit () {
    const routeEndEvent$ = this.router.events
      .pipe(
        filter(e => e instanceof NavigationEnd),
        tap(() => console.warn("END")),
    );

    this.router.events
      .pipe(
        filter(e => e instanceof ChildActivationEnd && e.snapshot.component === this.route.component),
        buffer(routeEndEvent$),
        map(([ev]) => (ev as ChildActivationEnd).snapshot.firstChild.data),
        takeUntil(this.ngUnsubscribe$)
      )
      .subscribe(childRoute => {
        console.log('childRoute', childRoute);
      })
  }

  • routeEndEvent$是一个 observable，只有当路由准备好时才会发出（NavigationEnd）

  • filter(e => e instanceof ChildActivationEnd && e.snapshot.component === this.route.component)：在检查了路由器发出的事件一段时间后，我得出了这个解决方案来确定组件（ ）是否是更改（）路由HelloComponent的父（）。 this.route.componente.snapshot.component

  • buffer(routeEndEvent$)：我们只想在路由器达到其最终状态（NavigationEnd）时采取行动。在这里您可以阅读有关buffer运营商的更多信息

StackBlitz

于 2019-11-03T22:10:09.270 回答
0

我有同样的问题，当我订阅了ActivatedRoute的“数据”属性时，这个问题得到了解决。下面是一个例子。

零件：

constructor (private route: ActivatedRoute)  {
        this.route.data.subscribe(({ listData }) => {
        this.listData = listData
    })
}

路线：

{
    path: ':id',
    component: Component,
    resolve: {
        listData: ModuleService
    }
},
于 2021-04-01T18:32:52.210 回答