Angular2 路由問題修復 、求解

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

首先介紹一下測試代碼的組織結構，

 

 

其中包含兩個組件：button、accordion。這個例子采用的是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',
  }
];

 

這段路由中我定義了默認路由，會跳轉到button，但是我采用最新的angular-cli，並沒有進行跳轉，並且默認路由並沒有使用layoutcomponent組件，這是最大的問題，因為layoutcomponent組件是整個頁面的樣式文件。

目前的結果什么呢？

我展示一下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 { }

 

請注意appmodule.ts中我標紅的引入module，如果我將accordionmodule放在buttonmodule前面，那么顯示的就是accordionmodule的內容，反之顯示的就是buttonmodule的內容。

執行結果：

1.accordionmodule在buttonmodule前面

2.buttonmodule在accordionmodule前面

 

請注意，更改了順序以后，務必重新編譯，重新執行 ng serve命令。

會什么會出現這個問題？歡迎大家交流。下篇我會專門解釋這個問題的答案

 為了便於再現，如果有需要源代碼的可以聯系我QQ：474351703，博客園沒辦法直接上傳