angular 路由跳转以及传参

瓦瓦枫 發表於 2019-9-5 17:49:00

1. 路由跳转方式一： /路由?id='001' 方式 -- queryParams 方式
　路由配置：{ path: 'details', component: bookDetailsComponent }
   a.  指令跳转：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div> 　　<a ="['/details']" ="{id: item.id}" style="color:blue; font-size: 12px;cursor:pointer">查看详情</a></div>
</div>
　　routerLink：跳转的路由，数组形式，传参有两种写法： 1. 使用 ="{id: item.id}"， 2. ="['/details'， id]", 数组第一个值是　　　　　　　　　　　　路由，第二个值是要传递的参数
  b. js 实现跳转：
　　
其中 this.router 是 Router 的实例
import  { Router } from '@angular/router'
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div> constructor(private router: Router) {</div>
<div> }</div>
<div> jumpDetial(bookId: string): void {</div>
<div>        this.router.navigate(['/details'], {</div>
<div>            queryParams: {</div>
<div>                id: bookId</div>
<div>            }</div>
<div>        })</div>
<div>    }</div>
</div>
this.router.navigate(['user', 1]); 以根路由为起点跳转
this.router.navigate(['user', 1],{relativeTo: route}); 默认值为根路由，设置后相对当前路由跳转，跳转到子路由
this.router.navigate(['user', 1],{ queryParams: { id: 1 } }); 路由中传参数 /user/1?id=1
this.router.navigate(['view', 1], { preserveQueryParams: true }); 默认值为false，设为true，保留之前路由中的查询参数/user?id=1 to /view?id=1
this.router.navigate(['user', 1],{ fragment: 'top' }); 路由中锚点跳转 /user/1#top
this.router.navigate(['/view'], { preserveFragment: true }); 默认值为false，设为true，保留之前路由中的锚点/user/1#top to /view#top
this.router.navigate(['/user',1], { skipLocationChange: true }); 默认值为false，设为true路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效
this.router.navigate(['/user',1], { replaceUrl: true }); 未设置时默认为true，设置为false路由不会进行跳转
2. 以 /路由/参数  动态路由的方式跳转 -- snapshot方式
 路由配置：  { path: 'details/:id', component: bookDetailsComponent }
1. 指令跳转传参：
　　
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>　　<a ="['/details', item.id]"</a></div>
</div>
2. js 跳转：
　　
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>　　this.router.navigate(['/details', '1']</div>
</div>
 
3. 获取参数
this.route 是 ActivatedRoute 的实例
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { ActivatedRoute } from '@angular/router'</div>
</div>
a. 快照方式获取参数 snapshot
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>// 方式1</div>
<div>this.queryParams = this.route.snapshot.params['id']</div>
<div>// 方式2</div>
<div>
<div>this.route.params.subscribe(params=>{</div>
<div>　　this.queryParams = params</div>
<div>    console.log(this.queryParams)</div>
<div>})</div>
</div>
</div>
b. queryParams 方式获取参数
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>this.route.queryParams.subscribe(params=>{</div>
<div>　　this.queryParams = params['id']</div>
<div>    console.log(this.queryParams)</div>
<div>})</div>
</div>
 
<hr>
 
路由跳转时遇到的问题：
　　1. 组件中有跳转，父元素有点击事件。点击 routerLink 元素会触发父元素事件的问题？
　　　　解决：在routerLink元素上添加 click 事件，组织事件冒泡。
　　　　代码：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><ul style="display: flex;"></div>
<div>      <li *ngFor="let item of bookList" style="width: 300px; height: 320px; border: 1px solid #ddd;margin-left: 20px;"</div>
<div>      (click)="$event.stopPropagation();$event.preventDefault(); jumpDetial(item.id)"></div>
<div>         <div>{{ item.name }}</div></div>
<div>         <div>{{ item.id }}</div></div>
<div>         <a (click)="$event.stopPropagation()" ="['/details', '1']" ="{id: item.id}"  style="color:blue; font-size: 12px;cursor:pointer">查看详情</a></div>
<div>         </div>
<div>         <a (click)="$event.stopPropagation()" ="['./intro']">简介</a></div>
<div>      </li></div>
<div>   </ul></div>
</div>
　　 2. 事件跳转时，如果该组件没有子路由， = "home" 可以跳转成功，如果该组件有子路由不加  " / " 则认为时跳转到  "/父路由/home"
　　　所以，路由跳转 = "/home" 表示一级路由  = "./home" 表示二级路由
　　
　　3. 跳转到子路由
　　
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div> toChildPath(): void {</div>
<div>        // 方式1：全路径匹配</div>
<div>        this.router.navigate(['/book/intro']) </div>
<div>        // 方式2：使用relativeTo. 其中 router 是Router的实例，this.route是 ActivatedRoute 的实例</div>
<div>        this.router.navigate(['intro'], {</div>
<div>            relativeTo: this.route</div>
<div>        })</div>
<div>    }</div>
</div>
 
 
 
<hr>
 
 选中路由高亮：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><li class="nav_item" ="['/home']" routerLinkActive="active">首页</li></div>
</div>
 routerLinkActive 属性等于一个样式类名
 
 
　　 
来源：https://www.cnblogs.com/monkey-K/p/11455272.html

頁: [1]

琼殿技术论坛's Archiver

angular 路由跳转以及传参