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