Question

我在一个应用程序中创建了多个角度项目。我在根项目中使用了路由，并试图与子项目进行通信，但发生的情况是url被更改但页面未呈现。

根页面路由：

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'flights',
        loadChildren: '../../projects/flights/src/app/flight.module#FlightsSharedModule'
      },
      {
        path: 'passengers',
        loadChildren: '../../projects/passengers/src/app/app.module#PassengersSharedModule'
      }
    ]
  },
  { path: '**', component: DefaultLayoutComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    FlightsSharedModule.forRoot(),
    PassengersSharedModule.forRoot()
  ],
  exports: [ RouterModule ]
})

航班申请路线：

const routes: Routes = [{
  path: '',
  data: {
    title: 'Flights',
  },
  children: [
    {
      path: '',
      component: ListComponent,
      data: {
        title: 'List',
      },
    },
  ],
}];

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

乘客申请路线

const routes: Routes = [{
  path: '',
  data: {
    title: 'Passengers',
  },
  children: [
    {
      path: '',
      component: ListComponent,
      data: {
        title: 'List',
      },
    },
  ],
}];

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

在根应用程序路由中，如果我从根中删除模块，页面将显示如下所示的级联效果

但是，如果将这些项目导入为模块，则该页面不会呈现特定的组件，并且不会显示默认主页，而是显示如下所示的第一个应用程序

Answer 1

在根模块中

//In root module 

const routes: Routes = [
	{
		path: '',
        redirectTo: 'DashboardComponent',
        pathMatch: 'full',
		
	},
	{
		path: "FlightsApplication",
		data: { preload: true },
		loadChildren: () => FlightApplicationModule
	},
	{
		path: "PassengerApplication",
		data: { preload: true },
		loadChildren: () => PassengerApplicationModule
	},
	
	{ path: "**", component: NotFoundComponent }
];

航班申请模块

//Flights Application Routes:
const routes: Routes = [{

    {
		path: "Flights",
        component: 'ListComponent',
        pathMatch: 'full',
		
	},
}];

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

乘客应用模块

//Passenger Application Routes:
const routes: Routes = [{
  {
		path: "Passengers",
        component: 'ListComponent',
        pathMatch: 'full',
		
	},
}];

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

说明

在根模块中，我们首先告诉我们的项目，Pasenger和应用是两个不同的模块，因此我们添加了它们的名称和它们包含多个组件，这就是我们添加loadchildren的原因这将加载该模块的组件，输入输出相关事件模块我们为相关组件指定了路径

角多个项目路由URL被更改，但页面未呈现

1 个答案: