Angular2 路由問題修復詳解

2019-11-19 17:23:02

字體：大中小

來源：轉載

供稿：網友

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前面