Angular - 在组件 A 中添加组件 B

Question

我的项目中有以下结构，

src
- component-a
-- component-a.component.ts
-- component-a.html
-- component-a.scss
-- component-a.component.spec.ts

- component-b
-- component-b.component.ts
-- component-b.html
-- component-b.scss
-- component-b.component.spec.ts

- app.component.ts
- app.module.ts
- app.html

我在 app.component.ts 中使用 component-a，因此我已将其包含在 app.module.ts 的声明中。

declarations: [
        App, ComponentA,
    ],

在 app.html 中：<component-a></component-a>

现在我想在 component-a 中添加 component-b。 因此，无论我尝试了什么，当我在 component-a.html 中使用 <component-b></component-b> 时，我都会收到此错误：

Unhandled Promise rejection: Template parse errors:
'component-b' is not a known element:
1. If 'component-b' is an Angular component, then verify that it is part of this module.
2. If 'component-b' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<component-b></component-b>
"): ng:///AppModule/ComponentA.html@7:6 ; Zone: <root> ; Task: Promise.then ; Value: 

component-a.html中如何使用component-b？

• 我尝试在component-a.component.ts中导入component-b
• 我尝试在 app.module.ts 中导入和添加组件-b 声明。

Answer 1

1. 为这两个组件创建一个模块。
2. 将component B导入component A的模块imports。
3. 完成。

示例（A 模块）

import {NgModule} from '@angular/core';

import {BModule} from '@components/b/b.module';

@NgModule({
  imports: [
    BModule
  ],
  exports: [
    AComponent
  ],
  declarations: [
    AComponent
  ]
})

export class AModule {}

示例（B 模块）：

import {NgModule} from '@angular/core';

@NgModule({
  exports: [
    BComponent
  ],
  declarations: [
    BComponent
  ]
})

export class BModule {}

Answer 2

正如我们在评论部分所讨论的。您可以在 app.module 中提供 ComponentB 以将其导入整个应用程序。

import {NgModule} from '@angular/core';

@NgModule({
  ...
  declarations: [
    AComponent, BComponent
  ]
})    
export class AppModule {}

http://plnkr.co/edit/H929znCRMcqlwuI4ySvp?p=preview