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

前端之家收集整理的这篇文章主要介绍了Angular2无法识别来自导入模块的组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在玩Angular2,并试图让一个模块(BreadcrumbDemoModule)导入另一个模块(BreadcrumbModule).

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

‘ng2-breadcrumb’ is not a known element.

我想我必须在某个地方错过一条线,并希望有人可以向我指出我做错了什么.

非常感谢你提前!

BreadcrumbModule的文件

breadcrumb.component.html:

  1. THIS IS A BREADCRUMB TEST

breadcrumb.component.ts:

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'ng2-breadcrumb',template: require('./breadcrumb.component.html')
  5. })
  6. export class BreadcrumbComponent {}

组件/面包屑/ index.ts:

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { BreadcrumbComponent } from './breadcrumb.component';
  4.  
  5. @NgModule({
  6. imports: [
  7. BrowserModule //for later use
  8. ],declarations: [
  9. BreadcrumbComponent
  10. ]
  11. })
  12. export class BreadcrumbModule {}

BreadcrumbDemoModule的文件

面包屑demo.component.html:

  1. <ng2-breadcrumb></ng2-breadcrumb>

面包屑demo.component.ts:

  1. import { Component } from '@angular/core';
  2. import { BreadcrumbModule } from './../index';
  3.  
  4. @Component({
  5. selector: 'ng2-breadcrumb-demo',template: require('./breadcrumb-demo.component.html')
  6. })
  7. export class BreadcrumbDemoComponent {}

组件/面包屑/演示/ index.ts:

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { BreadcrumbModule } from './../index';
  4. import { BreadcrumbDemoComponent } from './breadcrumb-demo.component';
  5.  
  6. @NgModule({
  7. imports: [
  8. BreadcrumbModule,BrowserModule,],declarations: [
  9. BreadcrumbDemoComponent
  10. ]
  11. })
  12. export class BreadcrumbDemoModule {}
@H_502_40@
您必须将BreadcrumbComponent添加到exports数组:
  1. @NgModule({
  2. imports: [
  3. BrowserModule //for later use
  4. ],declarations: [
  5. BreadcrumbComponent
  6. ],exports: [
  7. BreadcrumbComponent
  8. ]
  9. })
  10. export class BreadcrumbModule {}

声明数组中的内容是模块本身内使用的组件/指令/管道.如果要将这些模块公开给导入模块的其他模块,则应将它们添加到exports数组中

猜你在找的Angularjs相关文章