Question

我正在尝试按照以下代码示例延迟加载模式（对话框）： https://github.com/GoogleChromeLabs/tour-of-thrones

区别是我没有1级路由模块，但有几个。相对于基于树的路由模块已定义了此路由。

const routes: Routes = [{
  path: '',
  component: ScenarioQueueComponent, 
  children: [{
    path: 'list',
    component: ListScenarioQueueComponent,
  },{
    path: 'add',
    component: AddScenarioQueueComponent,
  },{
    path: 'choosedialog',
    component: ScenarioDetailContainerComponent, // proxy component
    outlet: 'dialog',
    children: [
    {
        path: '',
        loadChildren: 'app/pages/scenario-queue/add/detail/detail.module#ScenarioDetailModalModule',
     },
    ],
   }],
}];

ScenarioQueueComponent是根组件，上面有几个按钮。添加并列出。他们正常工作。 ScenarioQueueComponent的html是：

@Component({
  template: `<router-outlet></router-outlet>
             <router-outlet name="dialog"></router-outlet>`,
})

在AddScenarioQueueComponent（路径：'add'）中，我有一个按钮

<a mat-stroked-button [routerLink]="['', { outlets: { dialog:['choosedialog'] }}]" color="primary">Choose a Scenario...</a>

该按钮应显示一个对话框，该对话框应出现在上面定义的命名插座中：<router-outlet name="dialog">

组件：ScenarioDetailContainerComponent是一个以<router-outlet></router-outlet>为模板的代理组件。根据“王后之旅”示例的作者，这是一种解决方法。

“我的模态”对话框模块如下所示

 const routes: Routes = [
 {
    path: '',
    component: ScenarioDetailModalComponent,
 },
];

@NgModule({
  imports: [RouterModule, RouterModule.forChild(routes)],
  declarations: [ScenarioDetailModalComponent],
  exports: [ScenarioDetailModalComponent, RouterModule],
})
export class ScenarioDetailModalModule {}

问题是我无法获得正确的路线。

获取：错误：无法匹配任何路由。网址段：“ choosedialog”

我试图将routerlink更改为：

[{ outlets: { dialog:['choosedialog'] }}]
['../', { outlets: { dialog:['choosedialog'] }}]

我尝试将path: choosedialog放在子树之外的路由定义中，但没有成功。错误不会消失。

延迟加载的模态路由找不到。错误：无法匹配任何路线。网址段：“ choosedialog”

0 个答案: