带有命名 socket 的 Angular 延迟加载不起作用

Question

我创建了一个产品文件夹，其中包含 products-home.component(parent) 和 products-list.component(child) 并命名为 outlet。

我收到 错误:无法匹配任何路线。 URL 段:使用延迟加载导航到 products-list 时的“products”。

这在急切加载时有效

app.module.ts

@NgModule({
  imports:      [ ...,ProductsModule ]
})

products.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: "products",
        component: ProductsHomeComponent,
        children: [
          {
            path: "products-list",
            component: ProductsComponent,
            outlet: "content"
          }
        ]
      }
    ])
  ]
})

这在延迟加载时不起作用

app.module.ts

const LazyRoutes: Routes = [
  {
    path: 'products',
    loadChildren: './products/products.module#ProductsModule'
  }
];
@NgModule({
  imports:      [ RouterModule.forRoot(LazyRoutes) ]
})

products.module.ts

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: "",
        component: ProductsHomeComponent,
        children: [
          {
            path: "products-list",
            component: ProductsComponent,
            outlet: "content"
          }
        ]
      }
    ])
  ]
})

Stackblitz

Answer 1

2021 更新...从 V7 到 V12 测试

为了使用延迟加载模块的命名导出，您必须导航到定义路由器的组件内的模块页面。例如:

考虑一下:

lazyModule.component.ts

<div>
  <a [routerLink]="[{outlets: {namedRouter: 'innerComponent'}}]">Open Link in Named Route</a><br>
  <router-outlet></router-outlet>
  <router-outlet name = 'namedRouter'></router-outlet>
</div>

单击 anchor 标记将在“namedRouter”导出中显示名为“innerComponent”的路由。

但是...出于某种原因，从任何其他嵌套组件更改“namedRouter”的路由(无论它是否在同一模块中)将不起作用 .在代码方面:

nestedComp.component.ts

<div>
  <button [routerLink]="{outlets: {namedRouter: 'aValidRoute'}}">IT SHOULD WORK, BUT IT DOESN'T</button> <!--- This will fail to resolve the route if called within the conteXt of the lazy loaded module. --->
</div>

如果您想从其他组件动态更改路由，我建议您实现一个 Observable 元素(例如，在 lazyModule.component.ts 中)，该元素监听抛给它的路由并调用路由器更改。请参见下面的示例:

一些服务.ts

private routeBS: BehaviorSubject = new BehaviorSubject(null);
routeObs = this.routeBS.asObservable();

changeNamedRouterRoute(route: string): void {
  this.routeBS.next(route);
}

lazyModule.component.ts

<div>
   <router-outlet></router-outlet>
   <router-outlet name = 'namedRouter'></router-outlet>
 </div>

 export class LazyModuleComponent implements OnInit {
   
   constructor(
     private service: SomeServiceService,
     private router: Router,
     private route: ActivatedRoute
   ) {}

   ngOnInit() {
     this.service.routeObs.subscribe(res => {
       this.router.navigate([{outlets: {namedRouter: res}}], {relativeTo: this.route.parent}).then(acc => {
           // do something when the router gives you the nod
       }).catch(err => {
           console.log(err);
           // do something when the router event fails
       });
     });
   }
 }

在其他应直接将路由设置为“namedRouter”的组件中，通过构造函数注入(inject)“someService”服务，然后调用该服务的 changeNamedRouterRoute() 函数，将所需路由指定为唯一参数。

希望这对某人有所帮助，我被困在这个问题上将近 6 个小时，但互联网并没有给我任何可靠的休息时间。 GitHub issues 由于不活动而未关闭而关闭，但我相信有些人可能会发现这非常有用。