Angular2无法从导入的模块中识别组件

Posted 2023-03-13

【中文标题】Angular2无法从导入的模块中识别组件

【英文标题】：Angular2 Not Recognizing component From Imported Module

【发布时间】：2017-06-08 03:43:44

【问题描述】：

我正在使用 Angular2，并试图让一个模块 (BreadcrumbDemoModule) 导入另一个 (BreadcrumbModule) 的组件。

目前，BreadcrumbModule 仅包含一个组件：ng2-breadcrumb。但是，当我尝试在BreadcrumbDemoModule 中使用此组件时，我收到错误消息：

'ng2-breadcrumb' 不是已知元素。

我想我一定是在某个地方漏掉了一句，希望有人能指出我做错了什么。

非常感谢您！

面包屑模块​​的文件

面包屑.component.html：

THIS IS A BREADCRUMB TEST

面包屑.component.ts：

import  Component  from '@angular/core';  

@Component(
  selector: 'ng2-breadcrumb',
  template: require('./breadcrumb.component.html')
)
export class BreadcrumbComponent 

组件/面包屑/index.ts：

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  BreadcrumbComponent  from './breadcrumb.component';

@NgModule(
  imports: [
    BrowserModule //for later use
  ],
  declarations: [
    BreadcrumbComponent
  ]
)
export class BreadcrumbModule 

BreadcrumbDemoModule 的文件

面包屑-demo.component.html：

<ng2-breadcrumb></ng2-breadcrumb>

面包屑-demo.component.ts：

import  Component  from '@angular/core';
import  BreadcrumbModule  from './../index';

@Component(
  selector: 'ng2-breadcrumb-demo',
  template: require('./breadcrumb-demo.component.html')
)
export class BreadcrumbDemoComponent 

components/breadcrumb/demo/index.ts：

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  BreadcrumbModule  from './../index';
import  BreadcrumbDemoComponent  from './breadcrumb-demo.component';

@NgModule(
  imports: [
    BreadcrumbModule,
    BrowserModule,
  ],
  declarations: [
    BreadcrumbDemoComponent
  ]
)
export class BreadcrumbDemoModule 

【参考方案1】：

您必须将BreadcrumbComponent 添加到exports 数组中，并且只导入CommonModule。您只能在您的应用中导入 BrowserModule 一次（通常在引导模块中）：

@NgModule(
  imports: [
    CommonModule
  ],
  declarations: [
    BreadcrumbComponent
  ],
  exports: [
    BreadcrumbComponent
  ]
)
export class BreadcrumbModule 

declarations 数组中的内容是模块本身中使用的组件/指令/管道。如果您想将这些暴露给导入您的模块的其他模块，则应将它们添加到 exports 数组中

【讨论】：

谢谢！我知道我遗漏了一些明显的东西。这就是我查看教程示例而不是直接参考 API 文档所得到的。

你在angular.io 找到的最好的教程和指南，巧合的是你可以找到 API 的地方；）