typescript 使用其他模块中的组件

mwecs4sa  于 2023-02-10  发布在  TypeScript
关注(0)|答案(7)|浏览(160)

我有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

czq61nw1

czq61nw11#

这里的主要规则是:

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

因此,尝试导出它:

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}
    • 我应该导出什么?**

导出其他模块中的组件应该能够在其模板中引用的可声明类。这些是公共类。如果不导出类,则该类将保持私有,仅对此模块中声明的其他组件可见。

创建一个新模块的那一刻,不管是不是懒惰的,任何一个新模块,并且你在其中声明了任何东西,这个新模块都有一个干净的状态(正如Ward Bell在https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2中所说)

Angular为每个@NgModule创建传递模
此模块收集从另一个模块导入的指令(如果导入模块的传递模块具有导出指令)或在当前模块中声明的指令。
当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 Ydirectives数组不包含ZComponent,原因是YModule尚未导入其传递模块在exportedDirectives数组中包含ZComponentZModule
  • XComponent模板中,我们可以使用ZComponent,因为Transitive module X具有包含ZComponent的指令数组,因为XModule导入模块(YModule),该模块导出模块(ZModule),该模块导出指令ZComponent
  • AppComponent模板中,我们不能使用XComponent,因为AppModule导入XModule,但XModule不导出XComponent

另见

      • 第一个e第一个f第一个x
      • 一个月一次**
      • 一个月三次**
l3zydbqr

l3zydbqr2#

(Angular 2 -Angular 7)
组件只能在单个模块中声明。为了使用另一个模块中的组件,您需要执行两个简单的任务:
1.导出其他模块中的组件
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 { }

第二个模块:

通过导入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 { }
um6iljoc

um6iljoc3#

你必须从你的NgModuleexport它:

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

daupos2t4#

请注意,为了创建一个所谓的"特性模块",您需要在其中导入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 { }

更多信息请访问:www.example.comhttps://angular.io/guide/ngmodule#create-the-feature-module

lpwwtiir

lpwwtiir5#

无论你想从另一个模块中使用什么,只要把它放到export数组中就行了。

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

hl0ma9xz6#

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

我从here(archived)得到这个。

cigdeys3

cigdeys37#

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

基于RoyiNamir的解释(非常感谢)。当使用延迟加载时,在任何其他模块中重用在模块中声明的组件是缺少的部分。
1st:在包含组件的模块中导出组件:

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

第2步:在您要使用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{}

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

相关问题