Question

我是角色4的新开发者。在我的一个项目中，我使用延迟加载进行路由。延迟加载模块包含子组件。但是，路由到子组件总是失败并出现错误。

 Error: Cannot match any routes. URL Segment: 'home/addGroup'

如果我做错了，你能帮忙吗？我尝试了所有的方式，但没有一个成功。

以下是我的模块和路由。

index.html：

<app-root></app-root>

app.module：

import { routes } from './app.routes';

@NgModule({
    declarations: [
        AppComponent,
        UserSignupComponent,
        UserLoginComponent,
    ],
    imports: [
        BrowserModule,
        routes,
        HttpModule,
        FormsModule
    ]
});

app.routes：

import { HomeModuleModule } from './home-module/home-module.module';

export const appRoutes: Routes = [

    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: UserLoginComponent },
    {
        path: 'home', loadChildren: './home-module/home-module.module#HomeModuleModule'
    }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.component.html：

 <router-outlet></router-outlet>

homemodule：

import { routes } from './home.routes';

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        routes,
        HttpModule,
        FormsModule
    ],

    declarations: [HomeComponent, AddGroupComponent, AddItemComponent],
    providers: [httpserviceClass, sharedserviceClass],
})

home.routes：

export const router: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    {
        path: 'home', component: HomeComponent,
        children: [
            { path: 'addItem/:groupName', component: AddItemComponent },
            { path: 'addGroup', component: AddGroupComponent },
        ]
    }
];

export const routes: ModuleWithProviders = RouterModule.forChild(router);

home.component.html：

<nav class="navbar navbar-default noMargin">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Budget</a>
    </div>
    <ul class="nav navbar-nav">
      <li> <a [routerLink]="['addGroup']"> addgroup </a>         </li>
    </ul>
  </div>
</nav>

<div>
 <router-outlet></router-outlet>
</div>

关键是，我可以通过

从登录组件重定向到家庭模块的“home”组件

“this.router.navigate（[ '家']）;”

但是，从home组件，我无法通过

路由到addGroup组件

<a [routerLink]="['addGroup']"> addgroup </a>

我错过了什么吗？

Answer 1

我发现了这个问题。我必须承认，在我发布问题时，我的理解是错误的。

我必须在这里提几点。

我使用路线＆＃34; home＆＃34;路由到homeModule。如 app.routes 。

{ path: 'home', loadChildren: './home-module/home-module.module#HomeModuleModule' }

在 home.routes 中，我正在加载＆＃34; HomeComponent＆＃34;作为默认值。因此路由到＆＃34; HomeComponent＆＃34;那是成功的。

如果我们敏锐地观察 home.routes ，

export const router: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{
    path: 'home', component: HomeComponent,
    children: [
        { path: 'addItem/:groupName', component: AddItemComponent },
        { path: 'addGroup', component: AddGroupComponent },
    ]
}
];

它包含一个单独的＆＃34; home＆＃34;路线。

        path: 'home', component: HomeComponent

因为这个不同的家庭＆＃34;路线也包含相同的名称＆＃34; home＆＃34;在＆＃34; app.routes ＆＃34;中，这增加了很多混乱。

有两种方法可以纠正。

1。首先，为了解决困惑，改变家庭＆＃39; home.route 中的路线，以及＃39;欢迎＆＃39;。

         path: 'home', component: HomeComponent,

到

         path: 'welcome', component: HomeComponent,

然后现在，修复实际的错误。

 { path: '', component: HomeComponent, pathMatch: 'full' }

应改为

 { path: '', redirectTo: 'welcome', pathMatch: 'full' }

这将在加载homeComponent时重定向到home / welcome。当您点击 addGroup 时，它会重定向到＆＃34; / addGroup＆＃34;。因此，结果路径将是＆＃34; / home / welcome / addGroup＆＃34;

顺便提一下，将 home.routes 中的路线更改为

 export const router: Routes = [     
 { path: '', component: HomeComponent,
     children:[               
       {path: 'addItem/:groupName', component:AddItemComponent},
       {path: 'addGroup', component:AddGroupComponent}
     ]
  }
];

在这种情况下，路由到addGroup时的结果路径只是＆＃34; / home / addGroup＆＃34;

无法在延迟加载模块

1 个答案: