如何使用angular2在单个页面中创建标题和侧栏

Question

我使用Angular 2分别创建了一个标题和一个侧栏。这个问题我想将它们整合为一个单独的。我想在一个页面中创建它们。

Answer 1

标题菜单栏如下

import {Component} from '@angular/core';

@Component({
    selector:'header-bar',
    template: `
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                ..........
          </div>
        </nav>

     `


})
export class HeaderBarComponent{


}

如下边栏

import {Component} from '@angular/core';

@Component({
    selector:'side-bar',
    template: `
        <div>
            .................
        </div>

     `


})
export class SideBarComponent{


}

您的AppComponent应该

import {Component} from '@angular/core';

@Component({
    selector:'app',
    template: `
        <div class="row">
            <div class="col-md-12">
                    <header-bar> </header-bar>
            </div>              
        </div>
        <div class="row">
            <div class="col-md-3">
                    <side-bar> </side-bar>
            </div>              
            <div class="col-md-3">
                    ..main content goes here
                    <router-outlet> </router-outlet>
            </div>              
        </div>

     `


})
export class AppComponent{


}

Answer 2

1. 创建导航栏组件（NavbarComponent）选择器：'navbar'
2. 创建侧边栏组件（SidebarComponent），选择器：'sidebar'

3. 在你的app.html：

   <div class="row">
       <navbar> </navbar>             
   </div>
   <div class="row">
       <div class="col-md-3">
              <sidebar> </sidebar>
       </div>              
       <div class="col-md-9">
               <router-outlet> </router-outlet>
       </div>              
   </div>
   

4. 您需要在app.module中添加声明的新组件。

   declarations: [NavbarComponent, SidebarComponent],