angular路由

一、生成router项目

    ng new router --routing

 

二、angular rout导航

五个参数：

1、routes 路由配置。保存着那个url对应展示哪个组件，以及在哪个routerOutLet展示组件（放在模块中的。包括path属性、component属性）

2、routerOutLet 在HTML中标记内容呈现位置的占位符指令（显示组件展示的位置）

3、router 负责运行时执行路由的对象。可以调用其navigate()和navigateByUrl()方法来导航到一个指定的路由（控制器中用）

4、routerLink 在html中申明路由导航用的指令（html中用的。放在a标签上。在模板中生成链接）

5、acticatedRoute 当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等

三、传递数据

在查询参数中传递数据

/product?id=1&name=2   =>   ActivatedRouter.queryParams[id]

　　

1、在父节点的a标签中写入：
   [routerLink]="['./product']" [queryParams]="{id:1}"

2、在子节点的ts文件中写入：
 private productId:number;
  constructor(private routeInfo:ActivatedRoute) { }

  ngOnInit() {
    this.productId =this.routeInfo.snapshot.queryParams["id"];
  }

需要依赖注入：import { ActivatedRoute } from '@angular/router';

3、子节点的html中引入
<p>商品详情是{{productId}}</p>

　　

在路由的路径中传递数据

{path:/product/id}  =>  /product/1  => ActivitedRoute.params[id]　　

在路由的配置中传递参数

{path:/product,conponent:ProductComponent,data:[{isProd:true}]}  
=>  ActivatedRouter.data[0][isProd]