标签：
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module.
Use the Wiki Search as example project.
Create a HomeComponent to contain every other components. Then in out app.component.html, we can just use router outlet to render the application:
app.component.ts:
import { Component } from ‘@angular/core‘;
@Component({
selector: ‘app-root‘,
templateUrl: ‘<router-outlet></router-outlet>‘,
styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
title = ‘app works!‘;
}
app.routes.ts:
import {HomeComponent} from "./home/home.component";
import {RouterModule} from "@angular/router";
const routes = [
{path: ‘‘, component: HomeComponent}
];
export default RouterModule.forRoot(routes);
The defualt component is HomeComponent. Export this config to the app.module.ts:
import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;
import { FormsModule } from ‘@angular/forms‘;
import {HttpModule, JsonpModule} from ‘@angular/http‘;
import { AppComponent } from ‘./app.component‘;
import { SearchBarComponent } from ‘./home/search-bar/search-bar.component‘;
import { ResultListComponent } from ‘./home/result-list/result-list.component‘;
import {SharedServiceModule} from "./home/shared/index";
import {CommonModule} from "@angular/common";
import {API_URL} from "./home/shared/constance.service";
import { MdButtonModule } from ‘@angular2-material/button‘;
import {MdInputModule} from "@angular2-material/input";
import {MdListModule} from "@angular2-material/list";
import {MdToolbarModule} from "@angular2-material/toolbar";
import { HomeComponent } from ‘./home/home.component‘;
import appRoutes from ‘./app.routes‘;
@NgModule({
declarations: [
AppComponent,
SearchBarComponent,
ResultListComponent,
HomeComponent
],
imports: [
MdButtonModule.forRoot(),
MdInputModule.forRoot(),
MdToolbarModule.forRoot(),
MdListModule.forRoot(),
appRoutes,
BrowserModule,
FormsModule,
CommonModule,
HttpModule,
JsonpModule,
SharedServiceModule.forRoot()
],
providers: [
{
provide: API_URL,
useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
[Angular 2 Router] Configure Your First Angular 2 Route
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/5904813.html
