Angular 角度-将组件B添加到组件A中

我的项目有以下结构：

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中：

现在我想在我的组件-a中添加组件-b。 因此，无论我尝试了什么，当我在component-a.html中使用

时，我都会遇到以下错误：

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: 

未处理的承诺拒绝：模板分析错误：
“组件b”不是已知元素：
1.如果“组件b”是一个角度组件，则确认它是该模块的一部分。
2.如果“component-b”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。("
[错误->]
“”：ng:///AppModule/ComponentA。html@7:6 ; 区域：；任务：承诺；价值：

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

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

为这两个组件创建一个模块

将

组件B

导入

组件A

的模块

导入

完成了 示例（模块）

示例（B模块）：

---

正如我们在评论部分所讨论的。您可以在

应用程序模块中提供
组件B
，以便将其导入整个应用程序

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

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

您必须为组件A（ng g模块组件A）创建单独的模块，将组件A和组件b移到那里，然后将该模块导入主模块（应用程序模块）中。尝试此操作，这可能会解决您的问题尝试此操作，这可能会解决您可以使用的问题。您为什么不像使用
ComponentA
一样，在
app.module
的
声明中添加
ComponentB
？您好。我遵循这些步骤，错误仍然显示出来。你知道为什么会这样吗（在b.module内部有什么我必须做的吗？您必须导出组件并声明它。如上面的示例所示。我将把它添加到答案中。还值得一提的是，这两个模块都应该导入一个共享模块，其中声明了公共模块、管道和指令。您可以在angular的官方st可以，但很可能不是，除非它是一个爱好项目。我只是不喜欢例子向你展示一种方法，但不一定是你应该或将要在真实例子中使用的方法。然后你更可能总是使用这种解决方案，因为“我一开始就是这样学会的”.你的答案有效，但我的答案更完整。所以我想我们的答案是互补的。@Chrillewoodz我完全支持你的理想主义想法，但我不同意给予“专业”的建议答案。我肯定你没有从SO答案中学到延迟加载，至少是它的核心概念。初学者在不了解核心概念的情况下很难开始使用模块/延迟加载概念。如果你提出这些上下文，那么对于初学者来说会变得更复杂。你的答案对于初学者和操作人员来说都有点复杂评论中提到它无法处理任务。原因可能很多，因为我们只知道架构的一部分。@Chrillewoodz在我看来，复杂的答案可能会阻止初学者学习angular，因为事情不会很快发生。但是如果他们看到“Hello World”在html中，我相信他们会更深入地挖掘文档。是的，我同意。在发布答案时，我通常不会考虑此人的个人技能，也许我应该采纳您的建议并开始这样做。@Chrillewoodz和我会记住提供更多适合现实生活的答案：-）
import {NgModule} from '@angular/core';

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

export class BModule {}

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

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