Angular中的路由相关

路由：就是根据不同的url地址，动态地让根组件挂载其他组件来实现一个单页面应用。

Angular 的 Router（即“路由器”）借鉴了这个模型。它把浏览器中的 URL 看做一个操作指南， 据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。 你可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。 当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，你也可以在代码控制下进行导航。 路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。

创建方法：
1.创建项目：ng new angularxxx
2.选择路由yes：would you like to add Angular routing? Yes
3.创建需要的组件：
ng g component home
ng g component news
ng g component product
4.引入组件：
import { HomeComponent } from ‘./home/home.component’;
import { NewsComponent } from ‘./news/news.component’;
import { ProductComponent } from ‘./product/product.component’;

5.配置路由（注意path 不能以斜杠（/）开头。 ）
const routes: Routes = [

{path:‘home’, component:HomeComponent},

{path:‘news’, component:NewsComponent},

{path:‘product’, component:ProductComponent},

//匹配不到路由时加载的组件，或者跳转的路由
{path:’**’, redirectTo:‘home’}
];

6.路由选中（即点击地址时会有效果）
<a [routerLink]=" [ ‘/home’ ] " routerLinkActive = “active” > 首页
.active{
color:red
}

路由器中的关键词汇及其含义：
路由器部件 含义
Router（路由器） 为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航
RouterModule 一个独立的 NgModule，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
Routes（路由数组） 定义了一个路由数组，每一个都会把一个 URL 路径映射到一个组件。
Route（路由） 定义路由器该如何根据 URL 模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。
RouterOutlet（路由出口） 该指令（）用来标记出路由器该在哪里显示视图。
RouterLink（路由链接） 这个指令把可点击的 HTML 元素绑定到某个路由。点击带有 routerLink 指令（绑定到字符串或链接参数数组）的元素时就会触发一次导航。The directive for binding a clickable HTML element to a route. Clicking an element with a routerLink directive that is bound to a string or a link parameters array triggers a navigation.
RouterLinkActive（活动路由链接） 当 HTML 元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个 HTML 元素添加或移除 CSS 类。
ActivatedRoute（激活的路由） 为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。
RouterState（路由器状态） 路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。
链接参数数组 这个数组会被路由器解释成一个路由操作指南。你可以把一个RouterLink绑定到该数组，或者把它作为参数传给Router.navigate方法。
路由组件 一个带有RouterOutlet的 Angular 组件，它根据路由器的导航来显示相应的视图。