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

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

要导航至以下路线：

dialogOutlet

主要路线将解析为InventoryComponent，指定的出口将解析为PackoutComponent。

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

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

或者，如果您希望无论主要路线如何显示this.router.navigate([{ outlets: { primary: 'inventory', dialogOutlet: null}]);，都可以在不显式定义主要路线的情况下进行导航：

dialogOutlet

然后清除对话框：

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

Demo

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

Demo with Lazy Module 1 Demo with Lazy Module 2

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

1 个答案: