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

Question

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

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

'ng2-breadcrumb' is not a known element.

我想我一定漏掉了某处，希望有人能指出我做错了什么。

非常感谢您！

BreadcrumbModule 文件

breadcrumb.component.html:

THIS IS A BREADCRUMB TEST

breadcrumb.component.ts:

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

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

components/breadcrumb/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 {}

Answer 1

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

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

declarations 数组中的内容 components/directives/pipes 在模块本身中使用。如果你想将这些暴露给导入你的模块的其他模块，那么它们应该被添加到 exports array

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

Angular2 Not Recognizing component From Imported Module

typescript

angular-components

angular