使用Angular Router导航基础

名称	简介
Routes	路由配置，保存着那个URL对应着哪个组件，以及在哪个RouterOulet中展示组件。
RouterOutlet	在HTML中标记路由内容呈现位置的占位符指令。
Router	负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定路由。
routerLink	在HTML中申明路由导航用的指令。
ActivatedRoute	当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等。

实例：

1.创建一个Angular Router项目；（ng new Router -routing）

2.新建两个组件home和product；

　　ng g component home

　　ng g component product

完成后项目结构截图

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导航基础完成