带有命名插座的角度延迟加载不起作用答案

【问题标题】：Angular lazy load with named outlet not working带有命名插座的角度延迟加载不起作用
【发布时间】：2020-06-09 04:15:40
【问题描述】：

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

使用延迟加载导航到products-list 时，我得到Error: Cannot match any routes. URL Segment: '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

【问题讨论】：

我不认为这是可以实现的。 Here's 进行了一些尝试的 SB 演示。
@AndreiGătej 你的 stackblitz 不起作用，我遇到了同样的错误 Error: Cannot match any routes. URL Segment: 'products'
这就是我的意思，我认为没有办法做到这一点，因为 ProsudtHomeComp 的路径是空的。它不会是空的，它会工作

标签： angular angular-routing angular-lazyloading

【解决方案1】：

这是 Angular 中的一个已知问题 - 22346 和 10981

当模块延迟加载时，需要设置父组件的路径为空。这是这里的问题，名为的子组件仅当父级具有路径（非空）时，出口才有效。

我通过添加虚假路径来实现此功能。

{
    path: "home", <--Here
    component: ProductsHomeComponent,
    children: [
      {
        path: "products-list",
        component: ProductsComponent,
        outlet: "content"
      }
    ]
}

由于路由配置发生了变化，我们必须将routerLink更改为'products/home'

<a [routerLink]="['/products/home', { outlets: { 'content': ['products-list'] } }]">Navigate to Products(Products List)</a>

【讨论】：

【解决方案2】：

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>

单击锚标记将在“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 中），该元素侦听向其抛出的路由并调用路由器更改。请参阅下面的示例：

someService.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”的其他组件中，通过构造函数注入“someService”服务，然后调用服务的 changeNamedRouterRoute() 函数，指定所需的路由作为唯一参数。

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

【讨论】：