Question

我已经在home-routing.module.ts

中配置了如下所示的路由

export const HomeRoutingModule: Routes = [
  {
    path:'',
    children:[
      {
        path:'',
        component:FirstComponent,
        data:
        {
          title: "first",
          urls: [{ title: "first component", url: "first" }]
        }
      },
      {
        path:'',
        component:SecondComponent,
        data:
        {
          title: 'second',
          urls: [{ title: "second component", url: "second" }]
        }
      }]

我的home.module.ts就像波罗河

imports: [
  CommonModule,
  HomeRoutingModule,
  RouterModule.forChild(HomeRoutingModule)
],
declarations: [FirstComponent, SecondComponent, ThirdComponent]

和我的app-AppRoutingModule.module.ts如下所示

export const routes: Routes = [
  { path: "first", component: FirstComponent },
  {
      path: "",
      children: [
        { path: "", redirectTo: "/first", pathMatch: "full" },
        { path: "first", loadChildren: "./home/home.module#HomeModule" },
      ]
    }]

和我的application.module.ts如下

@NgModule({
      declarations: [
        AppComponent,
        FirstComponent,
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],

路线first正常工作，但是在我尝试打开second路线网址的情况下，它无效但显示错误如下所示：

core.js：1673错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“第二” 错误：无法匹配任何路线。网址段：“第二”

Answer 1

我已经为您创建了演示。在这里，您可以找到如何实现延迟加载。

我创建了两个不同的模块文件，因此也创建了路由文件。一个是<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:color="#295055"/> <item android:state_enabled="false" android:color="@color/disabled"/> </selector>，第二个是AppModule(app.module.ts)。

在示例中HomeModule(home.module.ts)是延迟加载的。

在HomeModule中，您可以找到app.routing.ts级路由。在home.routing.ts中，您可以找到root和FirstComponent路由。

该示例与您的示例相同。

Stackblitz链接：https://stackblitz.com/edit/angular-crbx3f

Answer 2

您需要指定路径。

export const HomeRoutingModule: Routes = [
  {
    path:'',
    children:[
      {
        path:'first',
        component:FirstComponent,
        data:
        {
          title: "first",
          urls: [{ title: "first component", url: "first" }]
        }
      },
      {
        path:'second',
        component:SecondComponent,
        data:
        {
          title: 'second',
          urls: [{ title: "second component", url: "second" }]
        }
      }]

Answer 3

在app-AppRoutingModule.module.ts中，未定义第二条子路由。您应该添加

{ path: "second", loadChildren: "./home/home.module#HomeModule" }

在子数组中您的路径也是空的

Answer 4

确实使您想做的事情感到困惑，但我想您想要这样做：

{ path: "home", loadChildren: "./home/home.module#HomeModule" }

然后您要导航至home/first或home/second。

您现在拥有的方式是first/first，这有点奇怪。

找不到路由网址

4 个答案: