页眉上没有显示页眉和页脚

Question

我想在我的应用中的每个网页/路线上显示标题和页脚。

<header>和<footer>都是定义了html视图的组件，它们在没有<router-outlet>标记的模板中正确显示。

但与<router-outlet>

结合使用时

import { Component } from "angular2/core";
import { LoginComponent } from "./login/component/login.component";
import { DemoPageComponent } from "./demo_page/demo_page.component";
import {TaskPageComponent} from "./task/component/task_page.component";
import {
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    HashLocationStrategy,
    LocationStrategy,
    Router,
    RouteConfig,
    ComponentInstruction
} from 'angular2/router';
import {Header} from "./components/core/header/header.component";
import {HeaderSecondary} from "./components/core/header_secondary/HeaderSecondary";
import {Footer} from "./components/core/footer/footer.component";

@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES, Header, HeaderSecondary, Footer],
    template: `
    <header></header>
    <header-secondary></header-secondary>
    <router-outlet></router-outlet>
    <footer></footer>
    `
})

@RouteConfig([
    { path: '/', name: 'Root', redirectTo: ['Login'] },
    { path: '/login', name: 'Login', component: LoginComponent },
    { path: '/demoPage', name: 'DemoPage', component: DemoPageComponent },
    { path: '/tasks', name: 'TaskPage', component: TaskPageComponent }

])

export class App {
    constructor(public router: Router) { }
}

不会呈现页眉/页脚视图。

我加载的DOM看起来像这样

我无法扩展标头html，因为它没有正确加载，而我的<demo-page>组件已正确加载。

任何建议，为什么页眉/页脚对没有正确加载？

Answer 1

使用了错误的组件选择器。 问题已解决