使用来自其他模块的组件

我用Angular -cli生成了Angular 2.0.0应用。

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

我决定分离组件，所以我创建了一个TaskModule和一个组件TaskCard。现在我想在AppModule的一个组件(Board组件)中使用TaskCard。

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 { }

TaskModule:

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需要做什么?

当前回答

注意，为了创建所谓的“特性模块”，你需要在其中导入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

2017-12-08 14:11:53

其他回答

(Angular 2 - Angular 7)

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

导出另一个模块中的组件导入另一个模块到当前模块中

模块1:

有一个组件(让我们叫它:“ImportantComponent”)，我们想在第2模块的页面中重用。

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

模块2:

通过导入FirstPageModule来重用ImportantComponent

@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 { }

2019-01-26 19:21:09

一个很好的方法是从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);
    });
}

我从这里得到了这个(存档)。

2018-09-04 17:10:22

解决了如何在另一个模块中使用一个模块中声明的组件。

基于Royi Namir的解释(非常感谢)。当使用延迟加载时，在任何其他模块中重用一个在模块中声明的组件，这是一个缺失的部分。

第1步:导出包含它的模块中的组件:

@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{}

第二个模块导入第一个模块，第一个模块导入并导出组件。

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

2018-08-18 09:50:15

你必须从你的NgModule中导出它:

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

2016-09-20 18:58:41

注意，为了创建所谓的“特性模块”，你需要在其中导入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

2017-12-08 14:11:53

使用来自其他模块的组件

推荐文章

最新文章

标签