Angular 角度2路由-如何为我的结构实现

Angular 角度2路由-如何为我的结构实现,angular,angular2-routing,Angular,Angular2 Routing,为了自学和提高编程技能,我正在使用.NET Core和Angular 2构建一个应用程序 根据我到目前为止所读到的内容,我将我的NG2应用程序结构如下(我没有包括所有文件) 我读过,建议每个组件/功能都有自己的模块。路线也是这样吗?也就是说,每个组件/特征是否应该有自己的管线文件 我还到处寻找如何实现路由。我试图实现的是让导航组件出现在页面顶部(选中的选项突出显示),然后选中的组件(如主页、调度程序等)出现在正文中。Scheduler组件还可能有一个子菜单/选项卡系统,允许我首先加载日历(作为默

为了自学和提高编程技能,我正在使用.NET Core和Angular 2构建一个应用程序

根据我到目前为止所读到的内容,我将我的NG2应用程序结构如下(我没有包括所有文件)

我读过,建议每个组件/功能都有自己的模块。路线也是这样吗?也就是说,每个组件/特征是否应该有自己的管线文件

我还到处寻找如何实现路由。我试图实现的是让导航组件出现在页面顶部(选中的选项突出显示),然后选中的组件(如主页、调度程序等)出现在正文中。Scheduler组件还可能有一个子菜单/选项卡系统,允许我首先加载日历(作为默认视图),或者加载Scheduler组件下的任何其他组件

有人能解释一下我是如何做到这一点的吗,或者给我指一个资源,它能清楚地解释我需要做什么才能让这项工作发挥作用?我看过Angular doco和其他各种资源,但它们似乎都以不同的方式实现路由,或者它们使用了非常简单的示例,没有一个接近我想要实现的


提前感谢。

我认为您组织应用程序的方式没有遵循最佳实践。您不必为日历、约会等创建特殊模块。。。只需将这些组件连接到调度程序模块


为了帮助您更好地了解如何以更好的结构和模块化方式组织应用程序:

这取决于您是否需要延迟加载

如果不是:它应该在一个文件中

如果您需要:

主要路线:

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];
和延迟加载组件的路由:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

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

export const routing: ModuleWithProviders = RouterModule.forChild(routes);
有关详细信息,请查看本教程:


因此,经过多次尝试和错误,我最终放弃了我所做的一切,从零开始。这次我使用Angular 2 CLI工具创建了Angular 2应用程序。然后,我通过查看和中的示例来设置路由(感谢评论员Max Karpovets)


使用CLI工具可以轻松创建必要的组件并正确编译它们。我只需要手动添加路由和模块文件。

我明白你的意思。我又看了一眼样式指南(),是的,我可能对模块文件太过火了。但是我需要这些模块文件来设置路由吗(我的主要问题)?不,设置路由不需要每个组件的模块文件:请参阅我上面给出的链接中的危机模块示例。
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

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

export const routing: ModuleWithProviders = RouterModule.forChild(routes);