我可以在角度使用多少个路由器插座答案

【问题标题】：How many router outlets can i use in angular我可以在角度使用多少个路由器插座
【发布时间】：2021-01-07 13:24:14
【问题描述】：

您好，我只是想知道我可以在 Angular 中使用多少个路由器插座，有什么限制吗？

如果有，有多少？

这里是了解“多渠道”的链接，供任何不了解的人使用！

https://medium.com/angular-in-depth/angular-router-series-secondary-outlets-primer-139206595e2

谢谢

【问题讨论】：

对 outlet 没有限制，但是每个 outlet 对应一段代码，将在那里呈现，它会影响 url。使用更多代码，您的应用程序将加载更长的时间，并且对 url 长度有一些限制。除了这两个我认为没有任何限制
假设我使用了另外两个网点，URL 将如何显示？类似'localhost:4200/home(router2:comp2)(router3:comp3)?
您不能像您在评论中提到的那样以这种方式路由。对于要激活的任何父组件或子组件，您可以使用单独的路由。这是一个启动器：freakyjolly.com/…
我们可以，你可以看这里。 medium.com/@natelapinski/…。感谢您的回答和链接
感谢您让我知道@Yerrapotu。我的意思是，与普通路由相比，您可以在路由路径规范中指定超过 1 个出口。 codeburst.io/…

标签： javascript angular frontend

【解决方案1】：

对 outlet 没有限制，但是每个 outlet 对应一段代码，将在那里呈现，它会影响 url。使用更多代码，您的应用程序将加载更长的时间，并且对 url 长度有一些限制。除了这两个我认为没有任何限制

【讨论】：

【解决方案2】：

有什么限制吗？

不，没有具体限制。

【讨论】：

【解决方案3】：

如果你想使用多个<router-outlet></router-outlet>，你可以使用它。角度没有限制，但有一些使用多个的最佳实践在 app.component.html 中放置一个，如果您有许多特色模块，那么您可以为每个特色模块单独使用。

====== app.component.html=====

<app-header></app-header>
<!-- router-outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed. -->
<!-- It will act as a placeholder that angular automatically fills the current route state-->
<router-outlet></router-outlet>
<app-footer></app-footer>

======= app-routing.ts =====

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' , canActivate : [AuthGuardService]},
  { path: 'dashboard',  component: DashboardComponent, canActivate : [AuthGuardService], data: {role: 'system'}},
  { path: 'featureModule', loadChildren: './module/featureModule.module#FeatureModule', canActivate : [AuthGuardService]},
  { path: '**', component: NotFoundComponent }
];

并在FeatureModule 中添加单独的<router-outlet>，这样featuredModule 中的所有组件都将在FeatureModuleComponent.html 中呈现。

featureModuleComponent.Html

<app-menu [sysType]="featureModule"></app-menu>
<div class="bg-mage" [ngStyle]="{'background-image': backgroundImage, 'height': customImgHeight} ">
    <router-outlet></router-outlet> <!-- router outlet of featured module -->
</div>

【讨论】：