使用來自另一個模塊的組件（Angular）

Question

我想從另一個模塊調用一個組件。 該組件調用其他具有自己模塊的組件，這些組件也從 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{}

但它不起作用。 任何解決方法？

Answer 1

要在另一個模塊中使用組件，這些是涉及的步驟：

Step 1 ：首先從組件所屬的模塊中導出組件，以便在其他模塊中導入

first.module.ts

@NgModule({
declarations: [
    ComponentToBeCalled,

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

第 2 步：您需要在必須使用組件的模塊中導入 FirstModule（在您的情況下是包含TemplateComponent的模塊）

@NgModule({
declarations: [
    TemplateComponent,

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

注意：如果您的組件必須在多個模塊之間共享，請創建一個共享模塊，其中定義和導出這些組件。

共享模塊.ts

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

而你要做的就是將這些模塊導入到你想使用共享組件的所有其他模塊中