Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题。为了说明今天的问题,我特地新建了一个测试工程。欢迎交流。
首先介绍一下测试代码的组织结构,
其中包含两个组件:button、accordion。这个例子采用的是ng2-bootstrap.
我展示一下路由配置:
<div class="jb51code">
<pre class="brush:js;">
/**
- 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:'**',}
];
rush:js;">
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 {Accor
dionGuoModule}from './accor
dionGuo/accor
dion-guo.module';
import {LayoutComponent}from './layout/layout.component';
@NgModule({
decl
arations: [
AppComponent,LayoutComponent
],imports: [RouterModule.forRoot(routes),Accor
dionGuoModule,
browserModule,RouterModule,CommonModule,FormsModule,ButtonGuoModule,HttpModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }