Question

我有一个非常简单的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'; }

Answer 1

您需要将LoginComponent添加到directives-array中：

@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
    ]
})

Angular 2 - 在routeroutlet上方显示一个组件

1 个答案: