我有一个路由模块,因为它需要引用它将路由到的组件,我也必须导入它们。
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 部分和声明部分似乎都没有公开它们,我该怎么做才能让它如此易于理解?
答案 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的import
,export
和modules
。