Angular 6/7 辅助出口按路线导航 - 清除主要出口，它不应该

Question

延迟加载和使用命名插座。我已经让指定的插座按预期加载，但当它加载时，它也会清除主插座。我希望主插座保留它正在显示的组件，而只更改命名插座以显示新组件。

感谢@pixelbits 的一些帮助...这是一个不起作用的例子https://stackblitz.com/edit/angular-sw6cmc

我不想改变主插座。

html

<router-outlet></router-outlet>
<router-outlet name="dialogOutlet"></router-outlet>

路线：

 {    
    path: 'packoutdialog'
    , children:[
      {path:'', outlet:'dialogOutlet', component: PackoutComponent}]

  },

其中任何一个都将填充 dialogOutlet 但清除主要

 this.router.navigate(['inventory', 'packoutedialog'])
this.router.navigate(['packoutdialog',{outlets:{'dialogOutlet':[]}}],{skipLocationChange: true, relativeTo: this.activatedRoute.parent});

这似乎应该有效，但没有。

this.router.navigate([{outlets:{'dialogOutlet':['inventory','packoutdialog']}}])

预期的结果是主路由器出口保留其中的视图，只有命名的出口发生变化。目前，命名出口正在按预期更改，但主要出口正在清除。

Answer 1

当您同时拥有主要出口和辅助出口时，您需要确保两条路线都完全解析为一个组件。事实上，您应该单独考虑每个路由路径。

例如，如果您有一个设置路由器插座的组件和一个命名的路由器插座：

<router-outlet></router-outlet>
<router-outlet name="dialogOutlet"></router-outlet>

然后你需要确保每个路由都能解析到一个组件：

{ path: 'inventory', component: InventoryComponent, children: [...] }, 
{ path: 'packoutdialog', component: PackoutComponent, outlet: 'dialogOutlet' }

请注意，需要在根级别定义命名出口 dialogOutlet 的 packoutdialog 路由。如果您将命名出口定义为子路由，它将永远不会解析。

要导航到这些路线：

this.router.navigate([{ outlets: { primary: 'inventory', dialogOutlet: 'packoutdialog'} }]);

主要路线将解析为 InventoryComponent，命名出口将解析为 PackoutComponent。

要清除对话框，您可以明确指定两者的路径：

this.router.navigate([{ outlets: { primary: 'inventory', dialogOutlet: null}]);

或者，如果您希望能够显示 dialogOutlet 而不管主要路线，您可以在不显式定义主要路线的情况下进行导航：

this.router.navigate([{ outlets: { dialogOutlet: 'packoutdialog'}]);

然后清除对话框：

this.router.navigate([{ outlets: { dialogOutlet: null }]);

Demo

以上也适用于延迟加载的模块。

Demo with Lazy Module 1 Demo with Lazy Module 2

Angular 6/7 辅助出口按路线导航 - 清除主要出口，它不应该

Angular 6/7 Auxiliary outlet navigating to by route - clears primary outlet and it shouldn't

routing

lazy-loading

angular

angular-auxiliary-routes