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

Question

懒惰加载并使用命名插座。我已经按照预期获得了命名的插座，但是当它做到时，它也清除了主要插座。我希望主要的插座保留其显示的组件，而只是更改的命名插座以显示新组件。

感谢@pixelbits的一些帮助...这是一个无法正常工作的示例

我不希望主要插座更改。

html

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

路线：

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

其中的任何一个都会填充对话线，但要清除主

 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'} }]);

主要路由将解析为库存库，命名的插座将解析为packOutComponent。

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

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

或，如果您想能够显示dialogOutlet，无论主要路线如何

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

然后清除对话框：

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

演示

以上也适用于懒惰的负载模块。

带有懒模块1的演示带有懒模块的演示2