详解Angular5 路由传参的3种方法
Angular5 中路由传参是前端开发中非常重要的一部分，正确地传递参数可以使应用程序更加灵活和高效。本文将详细介绍 Angular5 路由传参的三种方法，并附带相应的代码示例，以便读者更好地理解和应用。
方法一：问号后面带的参数
在 Angular5 中，我们可以使用问号后面带的参数来传递参数。例如，我们可以使用 `/product?id=1&name=iphone` 这种形式的 URL 来传递参数。在 Angular5 中，我们可以使用 `ActivatedRoute.queryParams` 来获取参数。
例如，在 HTML 代码中，我们可以使用以下代码来传递参数：
```html
<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<div *ngFor="let item of msgs.data">
{{item.name}}: <a [routerLink]="['/next',item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
<a routerLink="/final">Reply</a>
<p></p>
</div>
```
在 JavaScript 代码中，我们可以使用以下代码来获取参数：
```javascript
ngOnInit() {
let obj = this.route.queryParams["_value"];
console.log(obj);
}
```
方法二：冒号形式
在 Angular5 中，我们也可以使用冒号形式来传递参数。例如，我们可以使用 `/product/:id` 这种形式的 URL 来传递参数。在 Angular5 中，我们可以使用 `ActivatedRoute.params` 来获取参数。
例如，在 HTML 代码中，我们可以使用以下代码来传递参数：
```html
<a [routerLink]="['/listDetail', item.id]">查看详情</a>
```
在 JavaScript 代码中，我们可以使用以下代码来获取参数：
```javascript
ngOnInit() {
let id = this.route.params["id"];
console.log(id);
}
```
在路由配置中，我们需要使用以下代码来配置路由：
```javascript
{ path: 'listDetail/:id', component: ListDetailComponent }
```
方法三：JS里的路径跳转
在 Angular5 中，我们也可以使用 JS里的路径跳转来传递参数。例如，我们可以使用 `/product` 这种形式的 URL 来传递参数，并在路由配置中使用 `data` 属性来传递参数。
例如，在 JavaScript 代码中，我们可以使用以下代码来传递参数：
```javascript
{ path: 'product', component: ProductComponent, data: [{ madeInChina: true }] }
```
在路由配置中，我们可以使用以下代码来获取参数：
```javascript
ngOnInit() {
let madeInChina = this.route.snapshot.data[0].madeInChina;
console.log(madeInChina);
}
```
Angular5 路由传参的三种方法可以满足不同应用场景的需求。正确地使用这些方法可以使应用程序更加灵活和高效。
