Angular路由(1)--知识点

       在这里有关Angular相关的知识，是学习网上视频教程中整理记录的知识。 

       Angular开发的应用就是SPA模式。讲Angular路由之前我们先讲SPA，这样才能更好的理解路由是干什么的。

        单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

        SPA跟我们传统网页相比，少了各种页面切来切去，节省了一些没必要的重复内容加载，用户体验更好。

注意：创建带路由的项目命令后面带上路由参数

ng new projectName --routing

1. Routes: 路由配置，保存着哪个URL对应展示哪个组建，以及在哪个RouterOutle中展示组件。

const routes: Routes = [
  {path: ``, component: HomeComponent},
  {path: `product`, component: ProductComponent},
  {path: `**`, component: Code404Component}
];

2. RouterOutlet: 在HTML中标记路由内容呈现位置的占位符指令。

<router-outlet></router-outlet>

3. Router: 负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由。

import { Component } from '@angular/core';
import { Route } from '@angular/compiler/src/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'router';

  constructor(private router: Router){

  }

  toProductDetails(){
    this.router.navigate([`/product`]);
  }
}

4. RouterLink: 在Html中生命路由导航用的指令。

<a routerLink="/">主页</a>
<a routerLink= "/product">字符串形式的链接</a>
<a  [routerLink]="['product']">数组形式的链接</a>

5. ActivatedRoute: 当前激活的路由对象，保存着当前的路由的信息。如路由地址，路由参数等信息。