Angular 2 - 在路由器出口上顯示一個組件

我有一個非常簡單的Angular 2應用程序，它沒有顯示出我期望的組件。我能夠在路由器插座組件外部顯示組件嗎？Angular 2 - 在路由器出口上顯示一個組件

我app.component.html看起來像這樣...

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

但是從不顯示登錄組件。如果將其放入路由器插座中顯示的其中一個組件內，則會顯示它。

Angular 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'; }

來源

2016-07-08 Ben Cameron

您的問題不顯示了很多關於你的設計。這當然是有效的。 –

我已添加app.component.ts代碼。你還想看什麼？ –

您需要將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 
    ] 
})

來源

2016-07-08 08:28:05 Dinistro

啊，是的，就是這樣，我錯誤地將它添加到提供者。謝謝。 –

Angular 2 - 在路由器出口上顯示一個組件

回答

相關問題