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>

现在我想在组件-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
我尝试在app.module.ts中导入和添加component-b 声明。

Answer 1

正如我们在评论部分所讨论的那样。您可以在ComponentB内提供app.module，以便在整个应用中导入。

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

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

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

Answer 2

为两个组件创建模块。
将component B导入component A的模块imports。
完成。

示例（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 {}

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

2 个答案: