Angular 7 - 从导入的模块中获取组件

Question

我阅读了堆栈溢出向我展示的所有问题，none 其中解决了我的问题。

我是 Angular 的新手，我有一对 Modules 和 Components。我想要一个子模块来导入一个组件。然后让父模块导入子模块并创建它的组件。是的，我已经在子模块中导出组件。

我想要这样：

父模块
- 子模块
  - 组件（玩具）

但我收到错误消息：

ERROR in parent/parent.module.ts(8,5): error TS2304: Cannot find name 'ToyComponent'.

我不明白为什么这不起作用。我将不胜感激对一些示例代码的解释。谢谢！

这是相关代码：

玩具组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-toy',
  templateUrl: './toy.component.html',
  styleUrls: ['./toy.component.css']
})
export class ToyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

玩具组件HTML

<p>
  Awesome toy!
</p>

子模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToyComponent } from './toy/toy.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [
    ToyComponent,
    ChildComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ToyComponent
  ]
})
export class ChildModule { }

父模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildModule } from './child/child.module';
import { ParentComponent } from './parent.component';

@NgModule({
  declarations: [
    ToyComponent,
    ParentComponent
  ],
  imports: [
    ChildModule,
    CommonModule
  ],
  exports: [
  ]
})
export class ParentModule { }

父组件HTML

<p>
  parent works! Child: Toy: <app-toy></app-toy>
</p>

Answer 1

修复：
1. 从 ParentModule.
的声明和导出中删除 ToyComponent 2. 在你的 Child Module 中声明 ToyComponent 并导出它。
3. 添加 ChildModule 作为父模块的导入。

原因:
您的 ToyComponent 在您的 ChildModule 下声明。由于您在 ParentModule 中使用了 ToyComponent，因此您需要从 ChildModule 中导出 ToyComponent。并在 ParentModule.

中导入 ChildModule

Answer 2

问题

似乎 ToyComponent 的导入语句在 ParentModule 中丢失，这导致了错误。

修复

由于 ToyComponent 被添加到 ChildModule 中的 exports 它必须未在 ParentModule
从中删除 ToyComponent declarations-列表在ParentModule

ToyComponent 为 ParentModule 所知，因为 ChildModule 已添加到 imports-列表。

Angular 7 - 从导入的模块中获取组件

Angular 7 - Getting Component from imported Module

javascript

angular-module

angular-components

angular

angular7

我阅读了堆栈溢出向我展示的所有问题，none 其中解决了我的问题。