【问题标题】:Angular routing: Home page URL should be http://localhost:4200/Angular 路由:主页 URL 应为 http://localhost:4200/
【发布时间】:2019-03-08 07:08:05
【问题描述】:

我已经在我的项目中完成了 URL 路由。当我重定向到主页时,URL 变为 http://localhost:4200/home。

我希望我的主页 URL 是 http://localhost:4200/ 而不是 http://localhost:4200/home

我的 app.routing.ts 文件:

    const routes: Routes = 
    [
     {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
     },
     {
      path: '',
      component: LayoutComponent,
      children: [
       {
         path: 'home',
         loadChildren: './home/home.module#HomeModule'
       }
      ]
     }
    ];

下面是 home.routing.ts 文件:

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

任何帮助将不胜感激,谢谢。

【问题讨论】:

    标签: angular angular-routing


    【解决方案1】:

    您可以使用以下方式实现相同的效果

    app.routing.ts

    const routes: Routes = [
      {
        path: '',
        loadChildren:
          './home/home.module#HomeModule'
      },
      {
        path: '',
        loadChildren:'./another/another.module#AnotherModule'
        
      }
      
    ];
    

    在 Home 模块路由器中

    const routes: Routes = [
      {
        path: '',
        component: LayoutComponent,
        children: [
          {
            path: '',
            component: HomeComponent,
           
          },
          {
            path: 'other',
            component: otherComponent,
          },
        ]
      }
    ];
    

    【讨论】:

    • 谢谢@JoelJoseph 在我将 LayoutComponent 的声明从 app.module 移到 home.module 后它起作用了。
    • 因为我想总是加载 LayoutComponent 所以如果我有任何其他模块 ex. TestComponent 来自 test.module 所以现在 URL 是 localhost:4200/test 所以应该加载 LayoutComponentTestComponent。在那种情况下,我应该在哪里声明测试模块路由?在 home.routing 中?如果我在 app.routing 中声明它,那么它将不起作用。
    • 如果是这样,在app.rotuter.ts 中,您可以为路径“”创建一个路径,在该路径中加载LayoutComponent,然后延迟加载的模块应该作为子路径加载到该路径,就像我一样在 home.router.ts 里做过
    • 感谢@JoelJoseph,通过添加home.modulehome.routing 解决了问题。非常感谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-27
    • 2016-11-28
    • 1970-01-01
    • 1970-01-01
    • 2018-11-15
    • 1970-01-01
    • 2019-09-02
    相关资源
    最近更新 更多