Angular 2+ 如何在对等模块中引用组件

Question

Angular 2 - 7：（来源如下）：我有包含组件 a 和 b 的 SectionA 模块。 SectionA 的对等体是具有组件 ba 和 bb 的 SectionB 模块。 SectionA和SectionB的parent被称为all-sections.module.ts。在 app.module 中，我只引用了 'all-sections module' 并且可以毫不费力地显示 A 部分和 B 部分的每个组件都在工作（如下所示）。
组件 'a' 可以在它的 html 中使用 'b'，但我无法从 SectionB 引用它的表亲 'bb'。问题：如何从 'a'.

显示 'bb'

SectionA模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AComponent} from './a/a.component';
import { BComponent } from './b/b.component';

@NgModule({
  declarations: [
    AComponent,
    BComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    AComponent,
    BComponent
  ]
})
export class SectionAModule { }

SectionB 模块（相当明显）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BaComponent } from './ba/ba.component';
import { BbComponent } from './bb/bb.component';

@NgModule({
  declarations: [
    BaComponent,
    BbComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    BaComponent,
    BbComponent
  ]
})
export class SectionBModule { }

All-Sections 模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {SectionAModule} from '../SectionA/SectionA.module';
import {SectionBModule} from '../SectionB/SectionB.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    SectionAModule,
    SectionBModule
  ],
  exports: [
    SectionAModule,
    SectionBModule
  ]
})
export class AllSectionsModule { }

app.module 仅导入 AllSectionsModule，然后 app.component.html 如下所示：

<div>
  <app-a></app-a>
  <app-b></app-b>
  <app-ba></app-ba>
  <app-bb></app-bb>
</div>

运行应用程序按预期运行：

但我找不到从 'a' 引用 'bb' 的方法，例如：

希望在我调用 'a' 时得到这样的东西。这是 'a.html':

<p>
  a works!  and
  <app-b></app-b> from within Section A  component a WORKS

BUT:
  <app-bb></app-bb>
  This won't work no matter how I try to reference it.
</p>

提前致谢！查克

Answer 1

如果您想使用另一个模块中的组件，您需要从包含该组件的模块中导出该组件，并将此模块导入您的模块：您可以找到更多信息 here

Answer 2

是的，您可以引用从 "Section A" 到 "Section B" 的组件。在 SectionB.module.ts.

中声明组件时

在你的情况下添加组件（要共享）它是 exports 数组中的 "bbComponent" 正如你在 declarations[=27 中所做的那样=]数组

例如：导出：['bbComponent'].

现在在 SectionA.module.ts 中导入 SectionB 模块。

之后您就可以使用该组件了。那不是一个好习惯。

而是制作一个您希望在不同模块中使用的组件的共享模块。这样就避免了循环引用的问题。

希望对您有所帮助。

Angular 2+ 如何在对等模块中引用组件

Angular 2+ how to reference component in a peer MODULE

cross-reference

angular-module

angular-components

angular