Angular4基本功【路由】

背景

今天主要运用基础知识页面之间的跳转，也就是路由的相关知识见解的内容

• RouterLink
• RouterOutlet
• Router—navigate()和navigateByUrl()方法
• 通配符**

---

通配符&& RouterLink

app-routing.module.ts

const routes: Routes = [
  { path: '',component:HomeComponent },
  {path: 'product',component:ProductComponent},
  //**表示通配符，他的意思是只要出现其他的没有对上名字的地址都属于这个组件，所以他必须放到最后的位置
  {path:'**',component:Code404Component}
];

---

app.component.html
为什么采用数组的形式，因为我们不单单可以传路径的名称，还可以传我们的参数，根据routerlink我们找到routers中的地址

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详细</a>

---

Router

app.component.html
这是一个事件绑定属性，点击它我们可以到ts中触发事件

 <input type="button" value="商品详情" (click)="product()">

---

app.component.ts

/代表前面所有的路径

 product(){
    //导航方法，也是使用的数组，使用数组的原因是数组可以传递参数
     this.router.navigate(['/product'])
  }

---

路由传递参数

数组路面的99表示我们传递的参数，前面是我们的路径
父html页面

<a [routerLink]="['./seller',99]">销售月信息</a>

ts

constructor( private routeInfo:ActivatedRoute ) { }
 ngOnInit() {
    this.sellerId=this.routeInfo.snapshot.params["id"];
  }

根路由

 {path: 'product/:id',component:ProductComponent,children:[
    {path:'',component:ProductDescComponent},
    {path:'seller/:id',component:SellerInfoComponent}
  ]},

子HTML

<p>
  {{sellerId}}
</p>

---

重定向路由

重定向按照字面意思进行表达就可以理解他的意思，重定向就是重写制定他的方向

路由模块中写入

  {path:'',redirectTo:'/home',pathMatch:'full'},

---

ActivatedRoute路由

前面所讲的路由传参的时候其实是基于ActivatedRoute路由的，当我们要传参的时候必须要引用然后再依赖注入（实例化）。

import{ActivatedRoute,Params}from'@angular/router';
constructor( private routeInfo:ActivatedRoute ) { }

有的人可能会问为什么路由传递参数的时候会用到ActivateRoute路由呢？？？？因为他是激活当前路由对象，并且主要是保存路由，保存路由传递的参数和地址，下面是他们在路由中传输数据的方式

• 在路由是传递数据
• 路径传递数据
• 路由配置传递数据

在路由是传递数据，当我们在app组件下的HTML页面下填入之后我们需要再接受方引入ActivateRoute路由并且进行注入

html

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

/**
获得传进来的值
**/

在接收方的ts
   this.protectId=this.routeInfo.snapshot.queryParams["id"];

---

在路径中传递参数
1修改路径中的path属性，让他可以携带参数
2修改路由连接的数据，让他可以传递数据，也就是指的我们的父组件
3修改子组件获取参数

//路径
  {path:'seller/:id',component:SellerInfoComponent}
//app中ts
<a [routerLink]="['/product',1]">商品详细</a>
//修改子组件获取参数
  this.protectId=this.routeInfo.snapshot.params["id"];

---

参数订阅于参数快照

这种新式的都被叫做参数快照snapshot，ngOnInit只被初始化一次，所以当我们遇到同一个页面但是传不同值得时候，他就会失效，解决方案是通过参数订阅解决,但参数订阅是如何解决的呢？？？？因为我们用的是订阅，所以每天我们都会接收改变之后的值，所以我们可以解决这个问题。

//参数快照
 this.router.navigate(['/product',2])
  ngOnInit() {   
    this.protectId=this.routeInfo.snapshot.params["id"];
}

//参数订阅
 this.routeInfo.params.subscribe((params:Params) => this.protectId=params["id"])

---

总结

每次接触都有新的概念新知识，感觉真好！！！