[angular2] [ngModules] wie man Komponente von anderem Modul anruft?

Question

Nach dem Update Winkel zu RC5 habe ich ein kleines Problem.

Ich fange an, meine Anwendung zu Modulen [ngModules] neu zu schreiben.

Und ich habe ein kleines Problem, ich habe zwei verschiedene Module, aber Modul1 muss eine Direktive (Komponente) von anderen Modul aufrufen.

Vorerst i, das zu tun, aber nicht funktionierte ...

AppModule (Modul 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 { 

} 

und in Vorlage

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

jetzt habe ich sim -cards.module (Modul 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 { 

} 

und SIM-cards.component (Modul 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 { 
... 
} 

Wie es in der richtigen Art und Weise zu tun? Muss ich eine Komponente (SIM-Karte) in ein Gerät importieren? in App-Komponente?

Oder mache ich etwas falsch ??

Im Browser bekomme ich nur String, Laden ... kein Fehler in der Konsole.

Answer 1

Exportieren Sie SimCardsComponent aus dem SimCardsModule. Nur exportierte Komponenten sind in den importierenden Modulen verwendbar.

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

Die NgModule documentation ist ein Muss gelesen werden.