使用另一个模块的组件

Question

我有使用 angular-cli 生成的 Angular 2.0.0 应用程序。

当我创建一个组件并将其添加到AppModule的声明数组时，一切都很好，它可以工作。

我决定将组件分开，所以我创建了一个TaskModule和一个组件TaskCard 。 现在我想在TaskCard的组件之一（ Board组件）中使用AppModule 。

应用模块：

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

import { AppComponent } from './app.component';
import { BoardComponent } from './board/board.component';
import { LoginComponent } from './login/login.component';

import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdToolbarModule } from '@angular2-material/toolbar';

import { routing, appRoutingProviders} from './app.routing';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { UserService  } from './services/user/user.service';
import { TaskModule } from './task/task.module';


@NgModule({
  declarations: [
    AppComponent,
    BoardComponent,// I want to use TaskCard in this component
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdButtonModule,
    MdInputModule,
    MdToolbarModule,
    routing,
    TaskModule // TaskCard is in this module
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

任务模块：

import { NgModule } from '@angular/core';
import { TaskCardComponent } from './task-card/task-card.component';

import { MdCardModule } from '@angular2-material/card';

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []
})
export class TaskModule{}

整个项目可在https://github.com/evgdim/angular2 （看板文件夹）上找到

我错过了什么？ 在BoardComponent使用TaskCardComponent需要做什么？

Answer 1

这里的主要规则是：

在组件模板编译期间适用的选择器由声明该组件的模块以及该模块导入的导出的传递闭包确定。

因此，尝试导出它：

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] <== this line
})
export class TaskModule{}

我应该导出什么？

导出其他模块中的组件应该能够在其模板中引用的可声明类。 这些是你的公开课。 如果您不导出类，它会保持私有，仅对在此模块中声明的其他组件可见。

你创建一个新模块的那一刻，无论是否懒惰，任何新模块并在其中声明任何内容，该新模块具有干净的状态（正如 Ward Bell 在https://devchat.tv/adv-in-angular/119 中所说的那样-aia-avoiding-common-pitfalls-in-angular2 )

Angular 为每个@NgModule s 创建可传递模块。

此模块收集从另一个模块导入的指令（如果导入模块的传递模块已导出指令）或在当前模块中声明。

当 angular 编译属于模块X模板时，它会使用在X.transitiveModule.directives 中收集的那些指令。

compiledTemplate = new CompiledTemplate(
    false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

按照上图这样

• YComponent不能在其模板中使用ZComponent ，因为Transitive module Y directives数组不包含ZComponent因为YModule没有导入ZModule其传递模块在exportedDirectives directives数组中包含ZComponent 。

• 在XComponent模板中，我们可以使用ZComponent因为Transitive module X有包含ZComponent指令数组，因为XModule导入模块 ( YModule ) 导出模块 ( ZModule ) 导出指令ZComponent

• 在AppComponent模板中，我们不能使用XComponent因为AppModule导入XModule但XModule不导出XComponent 。

也可以看看

• 为什么延迟加载模块必须导入 commonModule？ 角 2

• Angular 模块常见问题

• NgModule 中的声明、提供者和导入之间有什么区别

Answer 2

（角 2 - 角 7）

组件只能在单个模块中声明。 为了使用另一个模块的组件，你需要做两个简单的任务：

1. 导出其他模块中的组件
2. 将另一个模块导入到当前模块中

第一个模块：

有一个组件（我们称之为：“ImportantCopmonent”），我们想在第二个模块的页面中重新使用。

@NgModule({
declarations: [
    FirstPage,
    ImportantCopmonent // <-- Enable using the component html tag in current module
],
imports: [
  IonicPageModule.forChild(NotImportantPage),
  TranslateModule.forChild(),
],
exports: [
    FirstPage,
    ImportantCopmonent // <--- Enable using the component in other modules
  ]
})
export class FirstPageModule { }

---

第二模块：

通过导入 FirstPageModule 重用“ImportantCopmonent”

@NgModule({
declarations: [
    SecondPage,
    Example2ndComponent,
    Example3rdComponent
],
imports: [
  IonicPageModule.forChild(SecondPage),
  TranslateModule.forChild(),
  FirstPageModule // <--- this Imports the source module, with its exports
], 
exports: [
    SecondPage,
]
})
export class SecondPageModule { }

Answer 3

你必须从你的NgModule export它：

@NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []
})
export class TaskModule{}

Answer 4

请注意，为了创建所谓的“功能模块”，您需要在其中导入CommonModule 。 因此，您的模块初始化代码将如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TaskCardComponent } from './task-card/task-card.component';
import { MdCardModule } from '@angular2-material/card';

@NgModule({
  imports: [
    CommonModule,
    MdCardModule 
  ],
  declarations: [
    TaskCardComponent
  ],
  exports: [
    TaskCardComponent
  ]
})
export class TaskModule { }

此处提供更多信息： https : //angular.io/guide/ngmodule#create-the-feature-module

Answer 5

无论你想从另一个模块使用什么，只要把它放在导出数组中。 像这样-

 @NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule]
})

Answer 6

一个伟大而伟大的方法是从NgModuleFactory加载模块，你可以通过调用这个来加载另一个模块中的模块：

constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {}

loadModule(path: string) {
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
        const entryComponent = (<any>moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
        this.lazyOutlet.createComponent(compFactory);
    });
}

我从这里得到了这个。

Answer 7

@yurzui你有正确的解决方案，谢谢你的解释。

我有问题和这一行：

出口：[Commponent]解决了它。

Answer 8

解决了如何在其他模块中使用模块中声明的组件。

基于 Royi Namir 的解释（非常感谢）。 在使用延迟加载时，缺少在任何其他模块中重用模块中声明的组件的缺失部分。

第一：导出包含它的模块中的组件：

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] <== this line
})
export class TaskModule{}

第二：在你想使用TaskCardComponent的模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdCardModule } from '@angular2-material/card';

@NgModule({
  imports: [
   CommonModule,
   MdCardModule
   ],
  providers: [],
  exports:[ MdCardModule ] <== this line
})
export class TaskModule{}

像这样，第二个模块导入第一个模块，该模块导入和导出组件。

当我们在第二个模块中导入模块时，我们需要再次导出它。 现在我们可以使用第二个模块中的第一个组件。