Angular2 無法識別來自導入模塊的組件

Question

我在玩 Angular2，並試圖讓一個模塊 ( BreadcrumbDemoModule ) 導入另一個 ( BreadcrumbModule ) 的組件。

目前， BreadcrumbModule 只包含一個組件： ng2-breadcrumb 。 但是，當我嘗試在BreadcrumbDemoModule使用此組件時，我收到錯誤消息：

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

我想我一定在某處遺漏了一條線，希望有人能指出我做錯了什么。

非常感謝您提前！

BreadcrumbModule 的文件

面包屑.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 {}

面包屑演示模塊的文件

面包屑演示.component.html：

<ng2-breadcrumb></ng2-breadcrumb>

面包屑演示.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 {}

組件/面包屑/演示/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 一次（通常在引導模塊中）：

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

declarations數組中的內容是模塊本身中使用的組件/指令/管道。 如果你想將這些暴露給導入你的模塊的其他模塊，那么它們應該被添加到exports數組中