2016-08-28 13 views
6

角度をrc5に更新した後、私は小さな問題があります。[angular2] [ngModules]他のモジュールからコンポーネントを呼び出す方法は?

私はアプリケーションをモジュール[ngModules]にrewrtieします。

私は小さな問題がありますが、私は2つの異なるモジュールを持っていますが、module1は他のモジュールから指令(コンポーネント)を呼び出す必要があります。

今私はそれを行うために

が、働いていなかった...

AppModule(モジュール1):

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

import { HttpModule }  from '@angular/http'; 

import { SimCardsModule } from './+sim-cards/sim-cards.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CommonModule, 
    FormsModule, 
    HttpModule, 
    SimCardsModule 
    ], 
    providers: [], 
    entryComponents: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 

} 

AppComponent:

import { Component } from '@angular/core'; 

declare let $: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 

} 

とテンプレートで

<sim-cards> loading </sim-cards> 

私はsimを持っています-cards.module(モジュール2):

import { NgModule, ApplicationRef } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { HttpModule }  from '@angular/http'; 

import { SimCardsComponent } from './sim-cards.component'; 
import { SimCardsService } from './sim-cards.service'; 

@NgModule({ 
    declarations: [ 
     SimCardsComponent 
    ], 
    imports: [ 

     CommonModule, 
     FormsModule, 
     HttpModule 
    ], 
    providers: [SimCardsService], 
    entryComponents: [SimCardsComponent], 
    bootstrap: [SimCardsComponent] 
}) 
export class SimCardsModule { 

} 

とSIM-cards.component(モジュール2):

import {Component, OnInit, ViewEncapsulation} from '@angular/core'; 
import {SimCardsService} from './sim-cards.service'; 
import {IfEmptySetDefaultPipe} from '../pipes/if-empty-set-default.pipe'; 
import {IsInternalSimCardPipe} from '../pipes/is-internal-sim-card.pipe'; 
import {ClientNumberSimCardPipe} from '../pipes/client-number-sim-card.pipe'; 
import {OperatorIdSimCardPipe} from '../pipes/operator-id-sim-card.pipe'; 

declare let $: any; 

@Component({ 
    selector: 'sim-cards', 
    templateUrl: 'sim-cards.component.html', 
    styleUrls: ['sim-cards.component.scss'], 
    encapsulation: ViewEncapsulation.None, 
    pipes: [IfEmptySetDefaultPipe, IsInternalSimCardPipe, ClientNumberSimCardPipe, OperatorIdSimCardPipe] 
}) 
export class SimCardsComponent implements OnInit { 
... 
} 

正しい方法でそれを行うにはどのように?私は、コンポーネント(simカード)をappmoduleでインポートする必要がありますか?アプリコンポーネントの?

または私は何か間違っていますか?

ブラウザでは、文字列のみが取得され、コンソールにはエラーはありません。

答えて

11

SimCardsComponentをSimCardsModuleからエクスポートします。インポートしたモジュールでは、エクスポートされたコンポーネントのみが使用できます。

@NgModule({ 
    exports: [SimCardsComponent], 
    ... 
}) 
export class SimCardsModule { 

NgModule documentationは必須です。

+0

thanks man !!質問を追加する前に私は既にdocを読んでいます...私はこのセクションに不一致があります!! – Daredzik

関連する問題