小编典典

使用来自另一个模块的组件

all

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

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

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

应用模块:

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(看板文件夹)上找到

我错过了什么?我需要做什么才能使用TaskCardComponentin BoardComponent


阅读 76

收藏
2022-05-09

共1个答案

小编典典

这里的主要规则是:

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

所以,尝试导出它:

@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-避免-常见的陷阱-in-
angular2 )

Angular为每个s创建 传递模块。@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在其模板中使用,因为directives数组Transitive module Y不包含ZComponent,因为YModule尚未导入ZModule其传递模块包含ZComponentexportedDirectives数组中。

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

  • AppComponent模板中我们不能使用XComponent,因为AppModule导入XModuleXModule不导出XComponent

也可以看看

2022-05-09