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 - 在路由器出口上显示一个组件

回答

相关问题