Angular 2使用其他模块中的组件

6 回答

• 1

  SOLVED HOW TO USE A COMPONENT DECLARED IN A MODULE IN OTHER MODULE.

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

  1st：导出包含它的模块中的组件：

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

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

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

  回复于 2024-04-27T10:13:31+08:00
• 26

  请注意，为了创建所谓的"feature module"，您需要在其中导入 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

  回复于 2024-04-27T10:13:31+08:00
• 0

  这里的主要规则是：

  The selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports.

  所以，尝试导出它：

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

  What should I export?

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

  The minute you create a new module, lazy or not, any new module and you declare anything into it, that new module has a clean state （正如Ward Bell在_368818中所说）

  Angular为每个 @NgModule 创建 transitive module .

  这个模块 collects directives that either imported from another module(if transitive module of imported module has exported directives) or declared in current module .

  当角度编译属于模块 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 其传递模块包含 ZComponent exportedDirectives 阵列英寸

  • 在 XComponent 模板，我们可以使用 ZComponent 因为 Transitive module X 具有指令数组，其中包含 ZComponent 因为 XModule 进口模块（ YModule ），其出口模块（ ZModule ），出口指令 ZComponent

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

  也可以看看

  • why lazy loaded module has to import commonModule? Angular 2

  • Angular Module FAQs

  • What is difference between declarations, providers and import in NgModule

  回复于 2024-04-27T10:13:31+08:00
• 260

  无论你想从另一个模块使用什么，只需将其放入 export array 即可 . 像这样-

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

  回复于 2024-04-27T10:13:31+08:00
• 0

  一个很好的方法是从 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得到了这个 .

  回复于 2024-04-27T10:13:31+08:00
• 0

  你必须 export 来自 NgModule ：

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

  回复于 2024-04-27T10:13:31+08:00