@angular/cli项目构建--路由1

app.module.ts

import {BrowserModule} from ‘@angular/platform-browser‘;
import {NgModule} from ‘@angular/core‘;

import {AppComponent} from ‘./app.component‘;
import {NavBarComponent} from ‘./nav-bar/nav-bar.component‘;
import {FooterComponent} from ‘./footer/footer.component‘;
import {SearchComponent} from ‘./search/search.component‘;
import {ProductComponent} from ‘./product/product.component‘;
import {CarouselComponent} from ‘./carousel/carousel.component‘;
import {StarsComponent} from ‘./stars/stars.component‘;
import {HomeComponent} from ‘./home/home.component‘;
import {RouterModule, Routes} from ‘@angular/router‘;
import {Code404Component} from ‘./code404/code404.component‘;
import { LoginComponent } from ‘./login/login.component‘;

const routes: Routes = [
  {path: ‘‘, redirectTo: ‘/home‘, pathMatch: ‘full‘},
  {path: ‘home‘, component: HomeComponent},
  {path: ‘login‘, component: LoginComponent},
  {path: ‘**‘, component: Code404Component}
];

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    FooterComponent,
    SearchComponent,
    ProductComponent,
    CarouselComponent,
    StarsComponent,
    HomeComponent,
    Code404Component,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app-nav-bar.component.heml update

<li><a routerLink="/home">首页</a></li>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>

login.component.html

<div class="container">
  <div class="main-box col-md-6 col-md-offset-3">

    <div class="panel panel-info">
      <div class="panel-heading">
        <div class="panel-title">Login</div>
      </div>

      <div style="padding:30px" class="panel-body">
        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
        <form class="form-horizontal" role="form">
          <label style="padding-bottom:10px" class="control-label">UserName</label>
          <div style="margin-bottom: 15px" class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input type="text" class="form-control" name="username" placeholder="username or email">
          </div>
          <label style="padding-bottom:10px" class="control-label">Password</label>
          <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            <input type="password" class="form-control" name="password" placeholder="password">
          </div>
          <div style="margin-top:10px" class="form-group">
            <div class="col-sm-12 controls">
              <a id="btn-login" href="#" class="btn btn-success">Login</a>
            </div>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>

home.component.html

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">
      <div class="row">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>

update app.component.html

<app-nav-bar></app-nav-bar>

<router-outlet></router-outlet>

<app-footer></app-footer>