Angular 6默认路​​由未加载。我该如何解决?

时间:2018-07-30 17:16:37

标签: angular angular6 angular-router angular-module

我有一个类似波纹管的6号角项目...

src
|- app
|  |- core
|  |  |- layout.component.ts/html/scss
|  |  |- core.module.ts
|  |- views
|  |  |- modules
|  |  |  |- sample
|  |  |  |  |- sample.component.ts/html/scss
|  |  |  |  |- sample-routing.module.ts
|  |  |  |  |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

...示例模块的路由结构如下...

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

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

...和应用程序路由模块看起来像...

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'sample',
        pathMatch: 'full'
      },
      {
        path: 'sample',
        loadChildren: './views/sample/sample.module#SampleModule'
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我注意到的行为是,当我为应用程序提供服务时,默认的基本路由应该为layout component不会加载。相反,我得到了白色屏幕,控制台中没有错误。然后,如果我输入http://localhost:4200/sample,我将得到正确的行为。仍然没有发生初始重定向,应该将布局组件与其中的示例模块一起加载。 app.component.html拥有<router-outlet></router-outlet>以及layout.component.html一直在寻找这种方法,试图找出比我认可的更长的时间。也许布局组件的位置比我想的重要,所以应该将其注册到应用程序模块?

3 个答案:

答案 0 :(得分:1)

我导入了RouterModule,并在默认项目的同一项目的一个旧的无关模块中定义了routes。像...

const routes = {
  {
     path: '',
     component: RandomComponent
  }
}
...
imports: [RouterModule.forChild(routes)]
...

删除该内容可以修复我尝试实现的路由。 Angular必须一直尝试注册一些急切的位置。说实话,对此有点傻。感谢那些回答!

答案 1 :(得分:0)

您的子路径与您的父路径相同

static char GetCharacter(string data, int index) => data[index];
static char GetCharacter(string data, int index) {
    return data[index];
}

答案 2 :(得分:0)

这似乎是一个问题,其中redirectTo在延迟加载的路由中被忽略。

无论哪种方式,都可以通过自己的配置在子路由本身中进行重定向。

sample.routing

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: 'sample',
        pathMatch: 'full'
      },
      {
        path: 'sample',
        component: SampleComponent,
      },

    ]
  }
];

和app.routing

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './views/sample/sample.module#SampleModule'
      }
    ]
  }
];