1

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

Error: Cannot match any routes. URL Segment: 'products'当导航到products-list使用延迟加载时，我得到了。

这在急切加载时有效

app.module.ts

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

产品.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) ]
})

产品.module.ts

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

堆栈闪电战

4

2 回答 2

0

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

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

考虑一下：

惰性模块.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 中），该元素侦听向其抛出的路由并调用路由器更改。请参见下面的示例：

一些服务.ts

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

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

惰性模块.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 问题由于不活动而没有关闭而关闭，但我相信有些人可能会觉得这非常有用。

于 2021-07-14T18:30:20.087 回答
0

这是 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>
于 2020-06-10T05:07:12.463 回答