时间戳

首页 > 解决方案 > 无法在不同的插座上打开路线

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

问题描述

我必须在我的 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>

我收到一个错误，说 Cannot match any routes with Url Segment templateModal 。我在 Angular 5 上，这是 StackBlitz 尝试一下：https ://stackblitz.com/edit/angular-n2eaje

标签： angulartypescriptjhipster

解决方案

如果在延迟加载的模块中存在辅助（即命名）路由，则对顶级路由使用非空路径。

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

并将templateUrl替换为模板，因为您添加了模板视图而不是 URL

喜欢，

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

这是更新的Stackblitz

推荐阅读