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

Question

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

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

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

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

非常感謝您提前！

文件爲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 {} 

組件/麪包屑/ 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 {} 

組件/麪包屑/演示/索引。 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添加到出口陣列：

的 declarations陣列內

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

東西是模塊內部使用的組件/指令/管道。如果你想將這些暴露給其他模塊導入你的模塊，那麼他們應該被添加到exports陣列