Angular 路由器没有加载正确的组件

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 时，它会从 AppRoutingModule 加载 FrameComponent。但是当导航到 /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'
  }

这段代码不会延迟加载 - 您不会在此处加载 childern，您只是在加载组件 FrameComponent 所以 angular 会为您完成

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

如果它不是 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 将被加载

希望一切顺利 - 如果您有任何疑问，请随时与我联系 - 编码愉快:)

Angular 路由器没有加载正确的组件

Angular router not loading the proper component

javascript

typescript

angular-routing

angular

angular-router