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

Question

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

感谢 @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']}}])

预期的结果是主路由器导出保留其中的 View ，并且只有指定的导出发生变化。目前指定的导出正在按预期发生变化，但主导出正在被清除。

Answer 1

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

例如，如果您有一个设置路由器导出和命名路由器导出的组件:

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

然后您需要确保每个路由都可以解析为一个组件:

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

请注意，需要在根级别定义命名 socket 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