2017-01-23 39 views
2

我在玩Angular2,试图让一个模块(BreadcrumbDemoModule)导入另一个模块(BreadcrumbModule)的组件。Angular2无法识别组件来自导入模块

目前,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 {} 

回答

8

你必须在BreadcrumbComponent添加到出口阵列:

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

东西是模块内部使用的组件/指令/管道。如果你想将这些暴露给其他模块导入你的模块,那么他们应该被添加到exports阵列

+0

谢谢!我知道我错过了一些明显的东西。这是我查看教程示例而不是直接引用API文档所得到的结果。 – SemperCallide

+0

您在[angular.io](https://angular.io)找到的最佳教程和指南,巧合的也是您可以找到API的相同位置;) – PierreDuc