場景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調(diào)用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

Angular中的路由配置、路由重定向、默認選中路由：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106182994

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

除了在超鏈接中進行路由跳轉(zhuǎn)，有時還需要在js中控制進行路由的跳轉(zhuǎn)

JS控制路由跳轉(zhuǎn)

首先在app.routing.module.ts中引入要跳轉(zhuǎn)的組件并配置要跳轉(zhuǎn)的路由

const routes: Routes = [{path:'parent',component:ParentComponent} ];

然后在頁面中添加一個button并添加點擊事件

<button (click)="goParent()">跳轉(zhuǎn)</button>

然后在ts中需要引入Router

import {Router} from '@angular/router';

并進行聲明

constructor(private router:Router) { }

然后在對應的方法中

? goParent(){this.router.navigate(['/parent']);}

效果

?

JS控制動態(tài)路由

Angular中實現(xiàn)動態(tài)路由跳轉(zhuǎn)并傳遞參數(shù)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106203529

動態(tài)路由的配置同上面一樣

在頁面新建按鈕并設(shè)置點擊事件

<button (click)="goDetails()">動態(tài)路由跳轉(zhuǎn)</button>

然后在app.routing.module.ts中引入要跳轉(zhuǎn)的組件并配置動態(tài)路由

const routes: Routes = [{path:'newsdetail/:id',component:NewsdetailComponent}];

在點擊事件中

? goDetails(){this.router.navigate(['/newsdetail/','123']);}

效果

?

JS控制路由get傳值跳轉(zhuǎn)

Angular中實現(xiàn)路由跳轉(zhuǎn)并通過get方式傳遞參數(shù)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106203220

配置get傳值方式同上。

在頁面新建按鈕并設(shè)置點擊事件

<button (click)="goDetails2()">get路由跳轉(zhuǎn)</button>

除了需要引入Router外還要引入NavigationExtras

import {Router,NavigationExtras} from '@angular/router';

然后在app.routing.module.ts中引入要跳轉(zhuǎn)的組件并配置路由

const routes: Routes = [{path:'newsdetail',component:NewsdetailComponent} ];

在點擊事件中

? goDetails2(){let navigationExtras: NavigationExtras = {queryParams: { 'session_id': '123' },fragment: 'anchor'};this.router.navigate(['/newsdetail'],navigationExtras);}

效果

?

總結(jié)

以上是生活随笔為你收集整理的Angular中使用JS实现路由跳转、动态路由传值、get方式传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。