web-dev-qa-db-ja.com

Angular2はインポートされたモジュールからコンポーネントを認識しません

私はAngular2で遊んでいて、あるモジュール（BreadcrumbDemoModule）に別のモジュール（BreadcrumbModule）のコンポーネントをインポートさせようとしています。

現在、BreadcrumbModuleには次の1つのコンポーネントのみが含まれています：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 {}

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 {}
angulartypescriptangular-components
13
SemperCallide

BreadcrumbComponentをexports配列に追加する必要があります。

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

declarations配列内のものは、モジュール自体の中で使用されるコンポーネント/ディレクティブ/パイプです。これらをモジュールをインポートする他のモジュールに公開する場合は、exports配列に追加する必要があります

18
PierreDuc