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' }

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