深入了解Angular中的路由,如何快速上手?
时间:2021-09-30 来源:互联网
今天PHP爱好者为您带来本篇文章带大家深入了解一下Angular中的路由,看看快速上手的方法,介绍一下匹配规则、路由传参、路由嵌套、路由守卫等,希望对大家有所帮助!希望对大家有所帮助。
import { Injectable } from "@angular/core"
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router"
import { Observable } from "rxjs"
@Injectable({
providedIn: "root"
})
export class AdminGuard implements CanActivateChild {
canActivateChild(): boolean | UrlTree {
return true
}
}
{
path: "about",
component: AboutComponent,
canActivateChild: [AdminGuard],
children: [
{
path: "introduce",
component: IntroduceComponent
}
]
}
3、CanDeactivate
检查用户是否可以退出路由。比如用户在表单中输入的内容没有保存,用户又要离开路由,此时可以调用该守卫提示用户
import { Injectable } from "@angular/core"
import {
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree
} from "@angular/router"
import { Observable } from "rxjs"
export interface CanComponentLeave {
canLeave: () => boolean
}
@Injectable({
providedIn: "root"
})
export class UnsaveGuard implements CanDeactivate<CanComponentLeave> {
canDeactivate(component: CanComponentLeave): boolean {
if (component.canLeave()) {
return true
}
return false
}
}
{
path: "",
component: HomeComponent,
canDeactivate: [UnsaveGuard]
}
import { CanComponentLeave } from "src/app/guards/unsave.guard"
export class HomeComponent implements CanComponentLeave {
myForm: FormGroup = new FormGroup({
username: new FormControl()
})
canLeave(): boolean {
if (this.myForm.dirty) {
if (window.confirm("有数据未保存, 确定要离开吗")) {
return true
} else {
return false
}
}
return true
}
4、Resolve
允许在进入路由之前先获取数据,待数据获取完成之后再进入路由
$ ng g resolver <name>
import { Injectable } from "@angular/core"
import { Resolve } from "@angular/router"
type returnType = Promise<{ name: string }>
@Injectable({
providedIn: "root"
})
export class ResolveGuard implements Resolve<returnType> {
resolve(): returnType {
return new Promise(function (resolve) {
setTimeout(() => {
resolve({ name: "张三" })
}, 2000)
})
}
}
{
path: "",
component: HomeComponent,
resolve: {
user: ResolveGuard
}
}
export class HomeComponent {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
console.log(this.route.snapshot.data.user)
}
}
以上就是深入了解Angular中的路由,如何快速上手?的详细内容,更多请关注php爱好者其它相关文章!
-
币安怎么购买Neutrino Index币?XTN币购买教程与币安binance下载入口 2025-06-05
-
什么是ODBC数据源 ODBC和JDBC的区别 2025-06-05
-
同事偷吃我零食,我把辣条放反方向 2025-06-05
-
币安怎么购买Pendle币?PENDLE币购买教程与币安binance下载入口 2025-06-05
-
币安怎么购买Frax Share币?FXS币购买教程与币安binance下载入口 2025-06-05
-
今天出门忘带脑子,幸好路上没人认识我 2025-06-05