我有Angular 2.0.0应用程序生成与Angular -cli.
当我创建一个组件并将其添加到AppModule
的声明数组中时,一切都很好,它工作正常。
我决定将组件分开,因此创建了一个TaskModule
和一个组件TaskCard
,现在我想在AppModule
的一个组件(Board
组件)中使用TaskCard
。
应用模块:
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
?
7条答案
按热度按时间czq61nw11#
这里的主要规则是:
因此,尝试导出它:
导出其他模块中的组件应该能够在其模板中引用的可声明类。这些是公共类。如果不导出类,则该类将保持私有,仅对此模块中声明的其他组件可见。
创建一个新模块的那一刻,不管是不是懒惰的,任何一个新模块,并且你在其中声明了任何东西,这个新模块都有一个干净的状态(正如Ward Bell在https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2中所说)
Angular为每个
@NgModule
创建传递模。此模块收集从另一个模块导入的指令(如果导入模块的传递模块具有导出指令)或在当前模块中声明的指令。
当Angular 编译属于模块
X
的模板时,将使用X. 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
尚未导入其传递模块在exportedDirectives
数组中包含ZComponent
的ZModule
。XComponent
模板中,我们可以使用ZComponent
,因为Transitive module X
具有包含ZComponent
的指令数组,因为XModule
导入模块(YModule
),该模块导出模块(ZModule
),该模块导出指令ZComponent
AppComponent
模板中,我们不能使用XComponent
,因为AppModule
导入XModule
,但XModule
不导出XComponent
。另见
l3zydbqr2#
(Angular 2 -Angular 7)
组件只能在单个模块中声明。为了使用另一个模块中的组件,您需要执行两个简单的任务:
1.导出其他模块中的组件
1.将其他模块导入到当前模块
第一个模块:
有一个组件(我们称之为:“ImportantComponent”),我们希望在第2个模块的页面中重新使用。
第二个模块:
通过导入FirstPageModule重用“ImportantComponent
um6iljoc3#
你必须从你的
NgModule
中export
它:daupos2t4#
请注意,为了创建一个所谓的"特性模块",您需要在其中导入
CommonModule
。因此,您的模块初始化代码将如下所示:更多信息请访问:www.example.comhttps://angular.io/guide/ngmodule#create-the-feature-module
lpwwtiir5#
无论你想从另一个模块中使用什么,只要把它放到export数组中就行了。
hl0ma9xz6#
一个很好的方法是从
NgModuleFactory
中加载模块,你可以通过调用以下代码在另一个模块中加载一个模块:我从here(archived)得到这个。
cigdeys37#
解决了如何在其他模块中使用模块中声明的组件。
基于RoyiNamir的解释(非常感谢)。当使用延迟加载时,在任何其他模块中重用在模块中声明的组件是缺少的部分。
1st:在包含组件的模块中导出组件:
第2步:在您要使用TaskCardComponent的模块中:
像这样,第二个模块导入第一个模块,第一个模块导入和导出组件。
当我们在第二个模块中导入模块时,我们需要再次导出它。现在我们可以在第二个模块中使用第一个组件。