【问题标题】:Routing with lazyLoading in children not working - cannot match route延迟加载的路由在子进程中不起作用 - 无法匹配路由
【发布时间】:2019-01-25 12:54:05
【问题描述】:

这是我的应用设置:

这是我的 app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SoftwareComponent } from './components/software/software.component';

const routes: Routes = [
    {
        path: '',
        outlet: 'main',
        component: SoftwareComponent,
        children: [
            {
                path: 'personal',
                children: [
                    {
                        path: '',
                        loadChildren: './components/software/data/personal/personal.module#PersonalModule' 
                    }
                ]
            }
        ]
    }   
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {enableTracing: true})],
    exports: [RouterModule]
})
export class AppRoutingModule { }

我的错误是:

ERROR 错误:未捕获(在承诺中):错误:无法匹配任何路由。 URL 段:“个人” 错误:无法匹配任何路由。 URL 段:“个人”

也许有人能说出我的设置有什么问题?

【问题讨论】:

  • 你试过routerLink=['/personal']吗?
  • 不,等一下
  • 你有 2 个引用路径 path: ''
  • 不起作用 kris,而 Jonas Praem 第一个空路径是主路由,另一个空路径是子路由 - 我认为如果你遵循官方没有任何错误文档 -> angular.io/guide/router#child-routing-component

标签: angular


【解决方案1】:

personal 移动到与第一个'' 相同的级别。

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'personal'
    },
    {
        path: 'personal',
        outlet: 'main',
        component: SoftwareComponent,
        children: [
            {
                path: '',
                loadChildren: './components/software/data/personal/personal.module#PersonalModule' 
            },
            {
                path: '',
                loadChildren: './components/software/header/header-personal/header-personal.module#HeaderPersonalModule'
            }
        ]
      }
    }   
];

【讨论】:

  • 如果我按照您发布的方式复制它,我会得到一个空白页。如果我将您的redirectTo: personal 编辑为redirectTo: /personal,我会得到与每次相同的错误,无法匹配任何路线。
  • 如果我删除了outlet,我将导航到localhost:4200/personal,而且:空白页
  • 您需要 <router-outlet> 才能让 Angular 知道在哪里加载组件。删除children 并确认SoftwareComponent 正在加载,然后再继续。
  • 从我的<router-outlet> 中的<router-outlet> 中删除了name="main" 现在应用程序已加载,但如果我单击链接,我的内容中不会呈现任何模块。如果我传递了我希望在其中呈现PersonalComponent 的插座的名称,我遇到github.com/angular/angular/issues/12842 - 好像我在一堆错误中运行
  • 通常情况下,我不会以这种方式使用{ path: '', loadChildren: '...' }。我会使用{ path: 'personal', loadChildren: '...' },然后在延迟加载模块中,我会输入{ path: '', component: '...' }
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-09-23
  • 1970-01-01
  • 2017-11-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多