尽管导出

时间:2018-04-14 22:50:14

标签: javascript angular typescript module angular-routing

我有一个路由模块,因为它需要引用它将路由到的组件,我也必须导入它们。

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

import { RegisterComponent } from "./admin/register/register.component";
import { LoginComponent } from "./admin/login/login.component";
import { ErrorComponent } from "./admin/error/error.component";

const routes: Routes = [
  { path: "register", component: RegisterComponent },
  { path: "login", component: LoginComponent },
  { path: "**", component: ErrorComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

组件放在另一个模块 - AdminModule 中。所有未来的组件都将放置在那里(或在他们自己的适当模块中)。我想用这样的单个替换三个导入。

// import { RegisterComponent } from "./admin/register/register.component";
// import { LoginComponent } from "./admin/login/login.component";
// import { ErrorComponent } from "./admin/error/error.component";
import { RegisterComponent, LoginComponent, ErrorComponent } from "./admin/admin.module";

这不起作用,并且消息显示模块 Admin 没有名称为 RegisterComponent 等的导出成员。所以我添加了 exports 部分到 AdminModule 类的装饰器,就像这样。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";

@NgModule({
  imports: [CommonModule],
  exports: [RegisterComponent, LoginComponent, ErrorComponent],
  declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }

令人遗憾的是,错误消息仍然存在,我不确定如何将组件识别为 AdminModule 的导出程序。为什么 exports 部分和声明部分似乎都没有公开它们,我该怎么做才能让它如此易于理解?

1 个答案:

答案 0 :(得分:1)

您正在将Typescript导出与Angular导出混合。 @NgModule的exports数组用于描述模块的公共API。它不会影响Typescript解析文件导入的方式。

让这条线像预期的那样工作:

import { 
  RegisterComponent, 
  LoginComponent, 
  ErrorComponent 
} from "./admin/admin.module";

您需要从文件本身导出组件。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";

export { RegisterComponent } from "./register/register.component";
export { LoginComponent } from "./login/login.component";
export { ErrorComponent } from "./error/error.component";

@NgModule({
  imports: [CommonModule],
  exports: [RegisterComponent, LoginComponent, ErrorComponent],
  declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }

official docs中详细了解Typescript的importexportmodules