angular 路由配置

1. 新建一个app.routing.module.ts 文件，可以手动添加也可以命令生成 （ng generate module app-routing --flat --module=app）

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

// 组件引入

import { TemplateDirective } from './directive/template-directive.component'

import { AppComponent } from './app.component';

const routes: Routes = [

  { path: '', redirectTo: 'directive', pathMatch: 'full' },

  { path: 'app', component: AppComponent  },

  { path: 'directive', component: TemplateDirective },

　　// ** 表示匹配不到时路由

  { path: '**', redirectTo: 'home'}

]

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

 2. 在根模块中引入（app.module.ts）

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

// 组件

import { TemplateDirective } from './directive/template-directive.component'

 

@NgModule({

  // 引入组件，指令

  declarations: [

    AppComponent,

    TemplateDirective,

    InputTrimDirective

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

3. 路由入口

<router-outlet></router-outlet>

 4. 子路由配置

{ path: 'book', component: TemplateBookComponent, children: bookChildrenRoutes},