Угловая 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' }

Обратите внимание, что маршрут 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 }]);

Демо

Вышеприведенное также работает для лениво загруженных модулей.

Демонстрация с Lazy Module 1 Демонстрация с Lazy Module 2