Question

我是Angular 2的新手。我想在根网址（http://localhost:4200）和http://localhost:4200/posts的'PostsComponent'中显示'HomeComponent'。我在app.routing.ts设置了以下内容。

export const AppRoutes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [{
      path: '',
      component: HomeComponent
    }, {
      path: 'posts',
      loadChildren: './posts/posts.module#PostsModule'
    },{
      path: '**',
      component: PageNotFoundComponent
    }]
  }
];

Home组件首次正确显示。当我访问帖子URL（帖子组件也正确显示）并返回到根URL（通过点击链接 - 例如：主页链接）时，它显示“页面未找到组件”。但是当我重新加载页面时，它正确地显示了主页组件。

我在这里缺少什么？

注意：如果我对''（空）路径使用“redirectTo”选项，那么它正在工作。然后主页组件将显示在http://localhost:4200/home。但我想在http://localhost:4200

显示主页组件

Answer 1

这是错误的网址

path: '',
component: AdminLayoutComponent,
children: [{
  path: '',
  component: HomeComponent
},

根据您的配置，这是HomeComponent所需的路线：＆＃34; //＆＃34;

尝试下一步

export const AppRoutes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [{
      path: 'home',
      component: HomeComponent
    }, {
      path: 'posts',
      loadChildren: './posts/posts.module#PostsModule'
    },{
      path: '**',
      component: PageNotFoundComponent
    }]
  }
];

Answer 2

当您登陆Home Component时，它会被重定向到空路径，而不是/ home。因此，请尝试以下操作，这将有所帮助。它的作用是在找到空路径时将其重定向到Out home组件。只需尝试添加我在下面写的行 >>>此处添加了代码

    export const AppRoutes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [{

     // >>> ADDED CODE STARTS HERE
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    }, 
    {
      path: 'home',
      Component: HomeComponent
    },
    // >>> ADDED CODE ENDS HERE

    {
      path: 'posts',
      loadChildren: './posts/posts.module#PostsModule'
    },{
      path: '**',
      component: PageNotFoundComponent
    }]
  }
];

Angular 2设置应用程序路由问题

2 个答案: