角路由器未加载正确的组件

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加载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的一部分， AppModule尝试这样的操作

APP-routing.module.ts

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

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

仪表板routing.module.ts

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

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

现在，如果路径为/dashboard angular，将加载仪表板模块并检查/dashboard旁的路径'' ，以便它将加载FrameComponent然后当您尝试访问路径时/dashboard/overview路由将加载子路径和OverviewComponet将被加载

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