Невозможно открыть маршруты по другому выходу

Question

Мне нужно в моем app.component.ts имя одного из них name = 'popup':

@Component({
    selector: 'app-main',
    template: `<router-outlet></router-outlet>
               <router-outlet name="popup"></router-outlet>`
})

export class AppComponent implements OnInit {

  public construnctor(){ }

  ngOnInit(){ }

}

и мое определение маршрута:

    export const myappRoute: Routes =[
      {
       path: '',
       component : DataEntryComponent
      },
      {
         path: 'templateModal',
         component: TemplateModalComponent,
         outlet: 'popup'
      }
    ];

export const TemplateRoute: ModuleWithProvider = RouterModule.forChild(myappRoute);

когда я пытаюсь открыть маршрут 'templateModal' с кодом ниже:

<button type='submit' [routerLink]="['/' , {outlets: {popup : 'templateModal'}}]" replaceUrl="true"> open </button> 

Я получаю сообщение об ошибке «Не удается сопоставить маршруты с сегментом шаблона URLModal». Я на Angular 5 и это StackBlitz, чтобы попробовать это: https://stackblitz.com/edit/angular-n2eaje

Answer 1

использовать непустые пути для ваших маршрутов верхнего уровня, если они вспомогательные (т.е. именованные) маршруты существуют в ленивом загруженном модуле.

<button type='submit' [routerLink]="['home', {outlets:{popup:['templateModal']}}]"> open </button>`

и замените templateUrl на template , потому что вы добавили представление шаблона, а не URL

как

@Component({
    selector: 'app-main',
    template: `<router-outlet></router-outlet>
               <router-outlet name="popup"></router-outlet>`
})

вот обновленный Stackblitz