Question

我正在尝试模块化我的路由模块，如下所示：

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './main/app.component';
import { MaterialModule } from '@angular/material';
import { RouterModule, Routes } from '@angular/router';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AppRoute } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoute
  ],
  providers: [
    UserService
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

app.routes.ts

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

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

这个方法运行正常，但我一直认为我已经指定了组件导入，例如两个文件上没有找到页面。有没有办法将组件导入模块化为单独的文件，以便我可以在模块和路由中包含该文件？我试验过这些：

app.routes.ts

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

import { AppComponent } from './main/app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent
    ],
    imports: [
        MaterialModule,
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

并从app.modules.ts中删除多余的声明，但似乎angular无法找到ngIf和md-icon。

我的目标是最小化用户必须编辑的文件数量，以满足克隆此骨架时的需要。我正在为我未来的项目创建一个框架，我想最小化我必须编辑的文件。如果可能，我不想触摸app.modules.ts，只编辑app.routes.ts和app.config.ts。或者更好的是，只编辑app.config.ts，并将const appRoutes放入app.config.ts。这甚至可能吗？什么是最小化编辑的最佳方法，这样我们就不需要对不必要的文件进行大量的篡改。

感谢您的帮助

Answer 1

您收到有关Angular但未找到NgIf的错误的原因是因为NgIf在Angular的@ angular / common模块中声明，并且您未在应用中导入该模块。 routes.ts文件。 （不确定为什么你会在md-icon中遇到问题 - 你在app.routes.ts中导入MaterialModule，因此它应该可用....）

但是，回到过度的概念，创建app.routes路由模块的关键是将路由问题从主app.module中分离出来。因此，责任是分开的，其中各种组件的声明发生在AppModule中，路由定义发生在AppRoutingModule中。由于这种分离（在一个模块中声明，应用于另一个模块中的路由），根据定义，您几乎总是会得到两个任何给定路由组件的导入 - 一个用于声明它属于哪个模块，另一个用于定义如何它可以路由到。

我自己也不会这样做，但如果双重导入打扰你那么多，那么唯一真正的解决方案是将两个模块组合成一个，这对于具有简单路由的应用程序实际上可能并不那么糟糕。

除此之外 - Typescript的一大好处是它提供的工具支持。我，我自己，使用WebStorm，老实说，从来没有真正输入（甚至看到）那些导入语句。 WebStorm具有在您引用各种类时自动添加/删除/调整导入的工具，因此它根本不是我管理的内容。（默认情况下，WebStorm也会折叠导入，因此除非您明确地展开它们，否则它们甚至都不可见）。

我怀疑其他支持Typescript的编辑器和IDE具有类似的工具，因此管理这些导入是没有问题的。

在Angular 2中模块化路线模块

1 个答案: