angular4路由設置筆記

場景說明：angular4開發的一個後臺項目

1、能夠使用angular-cli建立一個帶路由的項目，ng new 項目名稱 --routing

會多建立一個app-routing.module.ts文件代碼以下：

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

const routes: Routes = [
  {
    path: '',
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

2、手動配置路由文件

在app文件夾下面建立一個app.router.ts文件,基本結構代碼以下:

 

 

angular路由中涉及到不少新單詞詞彙

單詞	說明	使用場景
Routes	配置路由，保存URL對應的組件，以及在哪一個RouterOutlet中展示
RouterOutlet	在html中標記掛載路由的佔位容器
Router	在ts文件中負責跳轉路由操做	Router.navigate([「/xxx」]),Router.navigateByUrl(「/xxx」)
routerLink	在html中使用頁面跳轉	<a [routerLink]="['/xx']"
routerLinkActive	表示當前激活路由的樣式	routerLinkActive=」active」
ActivedRoute	獲取當前激活路由的參數,	這個是一個類，要實例化，使用實例化後的對象.params,xx.queryParams
redirectTo	重定向	redirectTo=」/路徑」
useHash	使用哈希值展示	{useHash:true}
pathMatch	徹底匹配	pathMatch:」full」