名稱

簡介

Routes

路由配置，保存著那個URL對應(yīng)著哪個組件，以及在哪個RouterOulet中展示組件。

RouterOutlet

在HTML中標(biāo)記路由內(nèi)容呈現(xiàn)位置的占位符指令。

Router

負(fù)責(zé)在運行時執(zhí)行路由的對象，可以通過調(diào)用其navigate()和navigateByUrl()方法來導(dǎo)航到一個指定路由。

routerLink

在HTML中申明路由導(dǎo)航用的指令。

ActivatedRoute

當(dāng)前激活的路由對象，保存著當(dāng)前路由的信息，如路由地址，路由參數(shù)等。

實例：

1.創(chuàng)建一個Angular Router項目；（ng new Router -routing）

2.新建兩個組件home和product；

　　ng g component home

　　ng g component product

完成后項目結(jié)構(gòu)截圖

3.配置app.routing.module.ts文件如下

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeeComponent} from "./homee/homee.component";
import {ProductComponent} from "./product/product.component";

const routes: Routes = [
  {path: '', component: HomeeComponent},
  {path: 'product', component: ProductComponent}
];

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

4.修改app.component.html文件如下

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']">商品詳情</a>


<router-outlet></router-outlet>

保存，運行，angular router導(dǎo)航基礎(chǔ)完成