角2 - ルーターアウトレットの上にコンポーネントを表示

Question

私はそれが期待されるコンポーネントを表示していない非常に単純なAngular 2アプリケーションを持っています。ルータコンセントコンポーネントの外にコンポーネントを表示できますか？ログインコンポーネントが表示されることはありませんが

私app.component.htmlは...

<login></login> 
<router-outlet></router-outlet> 

次のようになります。 ルータコンセントに表示されているコンポーネントの1つの中に入れた場合に表示されます。

角度2でこれを行うことができますか、私のデザインを変更する必要がありますか？

マイapp.component.tsはこのようになります...

import {Component} from '@angular/core'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import 'rxjs/Rx'; 
import {ROUTER_DIRECTIVES } from '@angular/router'; 

import { TilesService } from '../app/shared/services/tiles.service' 
import { LocationService } from '../app/shared/services/location.service' 

import {LoginComponent} from '../app/shared/login/login.component' 

@Component({ 
    selector: 'tc-app', 
    template: require('./app.component.html'), 
    styles: [require('./app.component.scss').toString(), 
      require('../../public/scss/styles.scss').toString() 
    ], 

    directives: [ROUTER_DIRECTIVES], 
    providers: [HTTP_PROVIDERS, 
       TilesService, 
       LocationService, 
       LoginComponent 
       ] 
}) 

export class AppComponent { pageTitle: string = 'TileCase'; } 

Answer 1

あなたはディレクティブアレイへLoginComponentを追加する必要があります。

@Component({ 
    selector: 'tc-app', 
    template: require('./app.component.html'), 
    styles: [require('./app.component.scss').toString(), 
     require('../../public/scss/styles.scss').toString() 
    ], 

    directives: [ROUTER_DIRECTIVES, LoginComponent], 
    providers: [ 
     HTTP_PROVIDERS, 
     TilesService, 
     LocationService 
    ] 
})