Header 和页脚未显示在页面上

Question

我想在我的应用程序中的每个 page/route 上显示 header 和页脚。

<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) { }
}

header/footer 视图未呈现。

我加载的 DOM 看起来像这样

我无法展开 header html，好像它没有正确加载，而我的 <demo-page> 组件已正确加载。

任何建议，为什么 header/footer 对没有正确加载？

Answer 1

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

Header 和页脚未显示在页面上

Header and footer not displayed on pages

angular-routing

angular