我有一个用于路由的模块,因为它需要引用它将路由到的组件,所以我也必须导入它们。
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。所有 future 的组件都将放置在那里(或在它们自己的适当模块中)。我想用这样的一个替换三个导入。
// 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 部分和 declaration 部分似乎都没有暴露它们,我该怎么做才能让它如此容易识别?
最佳答案
您正在混合使用 Typescript 导出和 Angular 导出。 @NgModule
的导出数组旨在描述模块的公共(public) 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
的更多信息.
关于javascript - 尽管导出,Angular 仍无法识别导入模块中的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49836903/