1

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

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 { }

应用程序.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 { }

此方法运行良好，但我一直认为我已经在两个文件上指定了组件导入，例如那个 page-not-found。有没有办法将组件导入模块化到单独的文件中，以便我可以将该文件包含在模块和路由中？我已经尝试过这些：

应用程序.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 appRoutesapp.config.ts。这甚至可能吗？什么是最小化编辑的最佳方法，这样我们就不需要对不必要的文件进行大量篡改。

谢谢你的帮忙

4

1 回答 1

0

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

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

我自己不会这样做，但是如果双重导入让您感到困扰，那么唯一真正的解决方案是将两个模块组合成一个，这对于具有直接路由的应用程序来说实际上可能并没有那么糟糕。

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

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

于 2017-02-26T04:33:10.120 回答