Question

我是angular的初学者，我有以下路线。

app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FrameComponent } from './ui/frame/frame.component';
import { NotFoundComponent } from './common/not-found/not-found.component';

const routes = [
  {
    path: 'login',
    loadChildren: 'src/app/login/login.module#LoginModule'
  },
  { 
    path: 'dashboard',
    component: FrameComponent,
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  },

  {
      path: "**",
      component: NotFoundComponent,
  }

];

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

dashboard.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { OverviewComponent } from '../overview/overview.component';


const routes = [
  { 
    path: '',
    children:[
      {
        path: 'overview',
        component: OverviewComponent,
        //outlet: 'dashboard-inside'
      }
    ]
  },
];

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

导航到/dashboard时，它将从FrameComponent加载AppRoutingModule。但是，当导航到/dashboard/overview时，它将从第二个路由器加载NotFoundComponent而不是OverviewComponent。

我仍然是Angular的初学者。我在做什么错了？

Answer 1

您在dashboard.routing.module.ts中的定义是错误的。

尝试以下方法：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { OverviewComponent } from '../overview/overview.component';


const routes = [
  { 
    path: 'overview', // <-- should be in root.
    component: OverviewComponent,
  },
];

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

Answer 2

您可以从仪表板路由中删除component: FrameComponent并将其移至仪表板路由模块中。

  { 
    path: 'dashboard',
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  },


  { 
    path: '',
    component: FrameComponent,
    children:[
      {
        path: 'overview',
        component: OverviewComponent,
      }
    ]
  },

我想您应该将模块导入到核心模块中。

Answer 3

我认为您没有正确定义路线

{ 
    path: 'dashboard',
    component: FrameComponent,
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  }

这段代码不会延迟加载-您没有在此处加载子代码，而只是在加载组件FrameComponent，因此它为您提供了帮助

如果您的FrameComponent是AppModule的一部分，则只需从路径中删除loadChildren，角度将为您执行相同的路线

如果它不是AppModule的一部分，请尝试类似的操作

app-routing.module.ts

 { 
    path: 'dashboard',
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  }

只需从路径中加载另一个模块，然后从该模块中加载所需的component

dashboard-routing.module.ts

{ 
    path: '',
    component: FrameComponent,
    children:[
      {
        path: 'overview',
        component: OverviewComponent,
        //outlet: 'dashboard-inside'
      }
    ]
  }

确保已在FrameComponemt内声明了DashboardModule，这将使您加载所需的路由

现在，如果路径为/dashboard，则将加载仪表板模块，并检查''旁边的路径/dashboard，因此它将加载FrameComponent，然后在您尝试访问路径/dashboard/overview，路由将加载子路由，而OverviewComponet将被加载

希望一切都会很好-如果您有任何疑问，请随时与我联系-编码愉快：）

角路由器未加载适当的组件

3 个答案: