Angular2.0—路由跳转

Angular2.0—路由跳转

[# Angular2.0 —构建项目的流程以及使用ng-zorro

友情链接：Angular2.0 —构建项目的流程以及使用ng-zorro

1.创建两个组件home和news，下载router模块

$  npm g component home
$  npm g component home
$ npm  g module  router

2.编写路由

<a href="###" [routerLink]="['/home']" routerLinkActive="active">首页</a>
<a href="###" [routerLink]="['/news']" routerLinkActive="active">新闻</a>
<router-outlet></router-outlet>

3.在router.ts文件中配置路由

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule,Routes } from '@angular/router';//引入路由模块
import { HomeComponent } from '../home/home.component';//引入组件
import { NewComponent } from '../new/new.component';

const congfig:Routes = [
    {
        path:'home',
        component:HomeComponent
    },
    {
        path:'news',
        component:NewComponent
    },
    {
        path:'',
        redirectTo:'/home',
        pathMatch:'full'
    }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(congfig)
  ],
  declarations: [],
  exports:[RouterModule]
})
export class RouterConfingModule { }

4.在app.module.ts中引入路由模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterConfingModule } from './router/router.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NewComponent } from './new/new.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NewComponent
  ],
  imports: [
    BrowserModule,
    RouterConfingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5.页面效果

image.png