5

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

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

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

4

1 回答 1

5

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

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

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

然后你需要确保每条路由都可以解析为一个组件：

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

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

要导航到这些路线：

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

演示

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

带有惰性模块 1 的演示 带有惰性模块 2 的演示

于 2019-05-03T06:02:58.333 回答