使用另一个模块中的组件(角度)

时间:2019-12-04 03:52:15

标签: angular

我想从另一个模块调用一个组件。该组件调用其他具有自己模块的组件,该模块还从TemplateComponent调用组件,该模板将导入该组件。

要调用的组件

templates: <app-sub [schema]="schema"></app-sub>

第一个模块

@NgModule({
declarations: [
    ComponentToBeCalled,

],
exports: [
    ComponentToBeCalled
  ]
})
export class FirstModule { }

模板组件

@NgModule({
  imports: [
   FirstModule
   ],
  providers: [],
  exports:[ FirstModule ] 
})
export class TemplateComponent{}

但是它不起作用。有解决方法吗?

1 个答案:

答案 0 :(得分:1)

要在另一个模块中使用组件,请执行以下步骤:

步骤1 :首先从该组件所属的模块中导出该组件,以便可以将其导入其他模块中

first.module.ts

@NgModule({
declarations: [
    ComponentToBeCalled,

],
exports: [
    ComponentToBeCalled
  ]
})
export class FirstModule { }

第2步:您需要在必须使用组件的模块中导入FirstModule(在您的情况下,该模块包含TemplateComponent

@NgModule({
declarations: [
    TemplateComponent,

],
imports: [
    FirstModule
  ]
})
export class SecondModule { }

注意:如果必须在多个模块之间共享组件,请创建一个共享模块,在其中定义和导出这些组件。

shared.module.ts

@NgModule({
declarations: [
    AlertComponent,
],
providers:[
   AlertService // services
],
exports: [
    AlertComponent // export the components you want
  ]
})
export class SharedModule { }

您要做的就是将这些模块导入到您要使用共享组件的所有其他模块中