update

src/app/app.component.html

-<h1>{{title}}</h1>
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li *ngFor="let hero of heroes"
-      [class.selected]="hero === selectedHero"
-      (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
-  </li>
-</ul>
-<div *ngIf="selectedHero">
-  <h2>{{selectedHero.name}} details!</h2>
-  <div><label>id: </label>{{selectedHero.id}}</div>
-  <div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-  </div>
-</div>
+<app-nav></app-nav>
+<app-leftbar></app-leftbar>
+<!--<term id="ngdiv" [ngClass]="{'hideleftbar':DataStore.leftbarhide}"></term>-->
+<router-outlet></router-outlet>
+<app-footer></app-footer>

src/app/app.component.ts

-import { Component } from '@angular/core';
-
-export class Hero {
-  id: number;
-  name: string;
-}
-
-
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
+/**
+ * Created by liuzheng on 2017/8/31.
+ */
+import {Component} from '@angular/core';
+import {AppService} from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  providers: [AppService],
+  // directives: [LeftbarComponent, TermComponent]
 })
 
 export class AppComponent {
-  title = 'Tour of Heroes';
-  heroes = HEROES;
-  selectedHero: Hero;
-
- onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
+  // DataStore = DataStore;
 }

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { HttpModule } from '@angular/http';
 import {AppRoutingModule} from './app-routing.module';
 
 
-import {IndexComponent} from './index.component';
+import {AppComponent} from './app.component';
 import {WelcomeComponent} from './welcome.component';
 import {NavComponent} from './nav.component';
 import {FooterComponent} from './footer.component';
@@ -26,7 +26,7 @@ import {PageNotFoundComponent} from './not-found.component';
     HttpModule,
   ],
   declarations: [
-    IndexComponent,
+    AppComponent,
     WelcomeComponent,
     NavComponent,
     LeftbarComponent,
@@ -35,7 +35,7 @@ import {PageNotFoundComponent} from './not-found.component';
     // HeroListComponent,
     // CrisisListComponent,
   ],
-  bootstrap: [IndexComponent],
+  bootstrap: [AppComponent],
   providers: [
     {provide: Options, useValue: {store: false, level: LoggerLevel.WARN}},
     Logger

src/app/index.component.ts

-/**
- * Created by liuzheng on 2017/8/31.
- */
-import {Component} from '@angular/core';
-import {AppService} from './app.service';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './index.html',
-  providers: [AppService],
-  // directives: [LeftbarComponent, TermComponent]
-})
-
-export class IndexComponent {
-  // DataStore = DataStore;
-}

src/app/index.html

-<app-nav></app-nav>
-<app-leftbar></app-leftbar>
-<!--<term id="ngdiv" [ngClass]="{'hideleftbar':DataStore.leftbarhide}"></term>-->
-<router-outlet></router-outlet>
-<app-footer></app-footer>