Angular2 路由問題修復(fù)詳解

更新時(shí)間：2017年03月01日 08:48:50 作者：baidixing

這篇文章主要介紹了Angular2 路由問題修復(fù)詳解的相關(guān)資料,并建了一個(gè)測(cè)試工程，把詳細(xì)的過程分享給大家，需要的朋友可以參考下

Angular2 提供了比angular1 更為強(qiáng)大的路由功能，但是在具體使用路由過程中，可是出現(xiàn)了很多路由不按照預(yù)想的方式執(zhí)行的問題。為了說明今天的問題，我特地新建了一個(gè)測(cè)試工程。歡迎交流。

首先介紹一下測(cè)試代碼的組織結(jié)構(gòu)，

其中包含兩個(gè)組件：button、accordion。這個(gè)例子采用的是ng2-bootstrap.

我展示一下路由配置：

/**
 * Created by guozhiqi on 2017/2/24.
 */
import {Route,Routes}from '@angular/router';
import {AppComponent}from './app.component';
import {LayoutComponent}from './layout/layout.component';

export const routes:Routes=[
 {
  path:'',
  redirectTo:'button',
  pathMatch:'full'
 },
 {
  path:'',
  component:LayoutComponent,
  children:[
   {
    path:'button',
    loadChildren:'./Button/Button-guo.module#ButtonGuoModule'
   },
   {
    path:'accordion',
    loadChildren:'./accordionguo/accordion-guo.module#AccordionGuoModule'
   }
  ]
 },
 {
  path:'**',
  redirectTo:'button',
 }
];

這段路由中我定義了默認(rèn)路由，會(huì)跳轉(zhuǎn)到button，但是我采用最新的angular-cli，并沒有進(jìn)行跳轉(zhuǎn)，并且默認(rèn)路由并沒有使用layoutcomponent組件，這是最大的問題，因?yàn)閘ayoutcomponent組件是整個(gè)頁(yè)面的樣式文件。

目前的結(jié)果什么呢？

我展示一下appmodule.ts代碼：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {ButtonGuoModule}from './button/button-guo.module';
import { AppComponent } from './app.component';
import {ButtonsModule}from 'ng2-bootstrap/buttons';
import {routes}from './app.routing';
import {RouterModule}from '@angular/router';
import {CommonModule}from '@angular/common';
import {AccordionGuoModule}from './accordionGuo/accordion-guo.module';
import {LayoutComponent}from './layout/layout.component';
@NgModule({
 declarations: [
  AppComponent,LayoutComponent
 ],
 imports: [RouterModule.forRoot(routes),AccordionGuoModule,
  BrowserModule,RouterModule,CommonModule,
  FormsModule,ButtonGuoModule,
  HttpModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

請(qǐng)注意appmodule.ts中我標(biāo)紅的引入module，如果我將accordionmodule放在buttonmodule前面，那么顯示的就是accordionmodule的內(nèi)容，反之顯示的就是buttonmodule的內(nèi)容。

執(zhí)行結(jié)果：

1.accordionmodule在buttonmodule前面