首先在路由界面配置路由,children是配置子路由的
const routes: Routes = [
{path:'',component:HomeComponent}
];
然后在引入組件:
Routes的使用
import { HomeComponent } from './home/home.component';
在path中不能使用"/",因為在多個視圖間導航時,自由使用相對或者絕對路徑
RouteRoutlet的使用:
插座,所有的界面都在本界面的下面顯示
RouterLink的使用:
app.component.html界面:
<a [routerLink]="['/']">主頁</a>
<a[routerLink]="['/product']">商品詳情</a>
<router-outlet></router-outlet>
解釋:routerLink后面'/'的是跳轉的跟路由,加上點是跳轉子路由的
點擊主頁面上的按鈕跳轉到路由界面
app-routing.module.ts路由界面
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
const routes: Routes = [
{path:'',component:HomeComponent},
{path:'product',component:ProductComponent}
];
例如:我點擊商品詳情,然后就找到跟路由中的product,然后根據引用找到相應的界面
還有通過按鈕跳轉:
<input type="button" value="商品詳情" (click)="todo()">
然后在到app.component.ts
constructor(private router:Router){
}
todo(){
this.router.navigate(['/product']);
}
}
完整界面截圖:
ActivatedRoute的使用:
app.component.html界面:
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品詳情</a>
product.component.ts界面,如何獲取ActivatedRoute參數:
export class ProductComponent implements OnInit {
private productId:number;
//首先在構造函數中注入(碼號后面的是類型)
constructor(private routerInfo:ActivatedRoute) { }
ngOnInit() {
//獲取參數
this.productId=this.routerInfo.snapshot.queryParams["id"];
}
}
product.component.html界面,現在最后的參數:
<p>
商品ID:{{productId}}
</p>
第二種傳參方式,URL方式
第一步:修改路由中的path屬性,改成
path:'product/:id',component:ProductComponent},
第二步:修改routerLink中的參數:
<a [routerLink]="['/product',1]" >商品詳情</a>
第三步修改取值:
ngOnInit() {//從URL中獲取
this.productId=this.routerInfo.snapshot.params["id"];
}
這種最后獲取的值是1,
todo(){
this.router.navigate(['/product',2]);
}
這方式獲取的結果是2但是來回切換的時候路徑中的值變換頁面的值不更換,解決這種問題方法叫做參數快照,使用這種方式叫做參數快照(snapshot),
在查詢參數中傳遞數據:
使用的方式參數快照(snapshot) 和 參數訂閱(subscribe)解決問題
步驟:修改第三步中的獲取參數的方式
ngOnInit() {
//參數訂閱
this.routerInfo.params.subscribe((params:Params)=>this.productId=params["id"]);
//this.productId=this.routerInfo.snapshot.params["id"];
}
路由重定向:
制定路由跳轉的界面:
{path:'',redirectTo:'/home',pathMatch:'full'},
{path:'home',component:HomeComponent},
解釋上面的意思:
當路由是空字符串的時候直接跳轉到home中,然后通過下面這行直接找到相應的home界面
子路由:
子路由創建的方法:
{path:'product/:id',component:ProductComponent,children:[
{path:'',component:ProductComponent},
{path:'seller/:id',component:SellerInfoComponent}
]},
注解:
路由配置完成之后,然后在相應的界面上添加插座routeroutlet
seller-info組件的配置:
seller-info.component.html
<p>
銷售員ID:{{selledid}}
</p>
seller-info.component.ts
部分代碼:
export class SellerInfoComponent implements OnInit {
private selledid:number;//定義一個數字型的變量
constructor(private routeinfo:ActivatedRoute) { }//構造函數
ngOnInit() {
this.selledid=this.routeinfo.snapshot.params["id"];//獲取路由中的值
}
}
product.component.html頁面的子組件,所以在此界面中添加
<a[routerLink]="['./']">商品詳情</a><!--子路由的寫法-->
<a[routerLink]="['./seller',99]">銷售員信息</a>
<router-outlet></router-outlet>
輔助路由(兄弟路由)
輔助路由插座的寫法:
<router-outlet name="aux"></router-outlet>
路由配置寫法:
{path:'chat',component:ChatComponent,outlet:'aux'}
在主頁面顯示寫法:
<a [routerLink]="[{outlets:{aux:'chat'}}]">開始聊天</a>
<a [routerLink]="[{outlets:{aux:null}}]" >結束聊天</a>
解釋:通過路由中的outlets找到chat的html頁面,然后顯示!
圖解:
<a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">開始聊天</a>
點擊開始聊天,chat界面和home界面都會顯示
路由守衛
先寫一個路由守衛,新建里一個ts,然后寫進去:
import { CanActivate } from "@angular/router";
export class loginGuard implements CanActivate{
canActivate(){
let lgogenIn:boolean=Math.random()<0.5;//獲取隨機數,
if(!lgogenIn){大于0.5顯示未登錄
console.log("用戶未登錄");
}
return lgogenIn;
}
}
綁定路由守衛:
canActivate:[loginGuard],實例化是通過angular注入來實例化的
守衛那個路由,就在那個路由的后面寫上
providers:[loginGuard]
詳細用法:
離開路由守衛,就是守衛那個組件,在離開的時候就會提示:
創建一個ts文件,然后
import { CanDeactivate } from "@angular/router";
import { ProductComponent } from "../product/product.component";//引用product組件
export class UnsaveGuad implements CanDeactivate<ProductComponent> {
canDeactivate(component: ProductComponent) {
return window.confirm("你還沒有保存確定離開嗎?");
}
}
添加在要被守衛的組件路由后面,并且添加providers
canDeactivate:[UnsaveGuad]//添加在路由后面
UnsaveGuad//添加在providers數組里面
守衛可以添加多個,在數組中有多個的時候可以循環完成如有一個沒有滿足條件,那么就不會執行當前的操作!