angular - 无法在不同的 socket 上打开路线

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> 

我收到一个错误，说无法将任何路由与 Url 段 templateModal 匹配。我在 Angular 5这是 StackBlitz 的尝试:https://stackblitz.com/edit/angular-n2eaje

Answer 1

use non-empty paths for your top level routes if auxilary(i.e. named) routes exist in a lazy loaded module.

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

并将 templateUrl 替换为 template 因为您添加的是模板 View 而不是 URL

喜欢，

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

这是更新的 Stackblitz