最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

angular - Root component ActivatedRoute route tree disconnected from child routes? - Stack Overflow

programmeradmin4浏览0评论

We have a module-based A19 application which has a root component/module and a relatively deep tree of child routes/modules.

app-routing.module.ts:

const routes: Routes = [
  { path: "foo", loadChildren: () => import("foo.module").then(m) => m.FooModule },
  { path: "bar", loadChildren: () => import("bar.module").then(m) => m.BarModule },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
}
export class AppRoutingModule;

foo-routing.module.ts:

const routes: Routes = [
  { path: "baz", loadChildren: () => import("baz.module").then(m) => m.BazModule },
  { path: "qux", loadChildren: () => import("qux.module").then(m) => m.QuxModule },
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
}
export class FooRoutingModule

The root app component sets up a listener for navigation events and performs an action on NavigationEnd. This is default behavior for our app, but some child routes should not perform the action. For those cases, we add a custom flag to the "data" property of the specific child routes that indicates we should skip the action.

The root component navigation event listener looks at ActivatedRoute which would points to the root-level route by default and then crawls the "children" array looking for the "skipAction" property in data somewhere along the way to the bottom component/route. If found, don't do the action.

foo-routing.module.ts:

const routes: Routes = [
  { path: "baz", data: { skipAction: true }, loadChildren: () => import("baz.module").then(m) => m.BazModule },
  { path: "qux", loadChildren: () => import("qux.module").then(m) => m.QuxModule },
];

appponent.ts

@Component(...)
{
  constructor(router: Router, route: ActivatedRoute)
  {
    router.events.subscribe(event =>
    {
      /// other events
      if (event instanceof NavigationEnd && !this.skipAction(route))
      {
        this.doAction();
      }
    }
  }

  private skipAction(route: ActivatedRoute): boolean
  {
    return route.snapshot.data.skipAction || (route.children.length && this.skipAction(route.children[0]));
  }

This worked in Angular 18 and prior, but after upgrading to A19, this has broken. It turns out the ActivatedRoute in the AppComponent no longer has any children, despite those children being loaded and rendered. Even wrapping the action code in a setTimeout with a wait obviously long enough to allow all children to load results in AppComponent's ActivatedRoute having no children.

However, if I inject ActivatedRoute at any point lower in the route tree, it has the full route hierarchy in parent / children properties, with the only exception being the parent chain ends before reaching AppComponent. It seems that the root route tree and the child route tree have become separated somehow.

I haven't found any information about this change when googling around, checking Angular docs for breaking changes, bug fixes, etc.

Anyone know anything that may lead to this, or some aspect of Angular 19 upgrade we may have missed?

Thanks!

发布评论

评论列表(0)

  1. 暂无评论