angularjs路由原理,angular路由嵌套
本篇文章带大家了解一下有角的中的路由模块，介绍一下匹配规则、路由传参、路由嵌套、命名插座、导航路由、路由懒加载等相关知识，希望对大家有所帮助！
在有角的中，路由是以模块为单位的，每个模块都可以有自己的路由。【相关教程推荐： 《angular教程》 】
快速上手
1、创建页面组件、布局组件以及航行组件，供路由使用
创建首页页面组件ng g c页面/主页
创建关于我们页面组件ng g c页/关于
创建布局组件ng g c页面/布局
创建导航组件ng g c页面/导航
2、创建路由规则
//app.module.ts
从" @angular/router "导入{路线}
const routes: Routes=[
{
路径："主页",
组件：HomeComponent
},
{
路径："关于",
组件：关于组件
}
]3、引入路由模块并启动
//app.module.ts
从" @angular/router "导入{路由模块，路由}
@NgModule({
进口：[路由器模块。对于根(路由，{ useHash: true })]，
})
导出类AppModule {}4，添加路由插座
！-路由插座即占位组件匹配到的路由组件将会显示在这个地方-
路由器出口/路由器出口5,在导航组件中定义链接
路由器Link=/home 首页/a
a routerLink=/about 关于我们/a
匹配规则
1、重定向
const routes: Routes=[
{
路径："主页",
组件：HomeComponent
},
{
路径："关于",
组件：关于组件
},
{
路径： ,
//重定向
重定向到："家",
//完全匹配
路径匹配："满"
}
]2、404 页面
const routes: Routes=[
{
路径："主页",
组件：HomeComponent
},
{
路径："关于",
组件：关于组件
},
{
路径："**",
组件：NotFoundComponent
}
]
路由传参
1、查询参数
a router link=/about [query params]= { name: kitty } 关于我们来自" @angular/router "的/aimport { ActivatedRoute }
导出在初始化上实现的关于组件的类{
构造函数（私有路由：ActivatedRoute) {}
ngOnInit(): void {
这个。路线。查询参数映射。订阅(查询={
query.get(name )
})
}
}2、动态参数
const routes: Routes=[
{
路径："主页",
组件：HomeComponent
},
{
路径： about/:name ，
组件：关于组件
}
]a [routerLink]=[/about ，张三]关于我们来自" @angular/router "的/aimport { ActivatedRoute }
导出在初始化上实现的关于组件的类{
构造函数（私有路由：ActivatedRoute) {}
ngOnInit(): void {
这个。路线。参数映射。subscribe(params={
params.get(name )
})
}
}
路由嵌套
路由嵌套指的是如何定义子级路由。
const routes: Routes=[
{
路径："关于",
组件：关于组件，
儿童：[
{
路径："介绍",
组件：简介组件
},
{
路径："历史记录",
组件：历史组件
}
]
}
]!about.component.html
应用程序布局
帕布特有效！/p
a routerLink=/about/introduction 公司简介/a
a routerLink=/about/history 发展历史/a
差异
路由器出口/路由器出口
/div
/app-布局图命名插座
将子级路由组件显示到不同的路由插座中。
{
路径："关于",
组件：关于组件，
儿童：[
{
路径："介绍",
组件：简介组件，
插座："左侧"
},
{
路径："历史记录",
组件：历史组件，
出口："右侧"
}
]
}!about.component.html
应用程序布局
帕布特有效！/p
路由器出口名称=左/路由器出口
路由器出口名称=右/路由器出口
/app-layouta
[路由器链接]=[
/关于，
{
网点：{
左：[介绍],
右：[历史]
}
}
]
关于我们
/a
导航路由
！app.component.html
按钮（点击)=jump()跳转到发展历史/button//app.component.ts
从" @angular/router "导入{路由器}
导出类HomeComponent {
构造器（私有路由器：路由器){}
jump() {
这个。路由器。导航([/关于/历史]，{
查询参数：{
名字："小猫"
}
})
}
}
路由模块
将根模块中的路由配置抽象成一个单独的路由模块，称之为根路由模块，然后在根模块中引入根路由模块。
从" @角度/核心"导入{ NgModule }
从""导入{ HomeComponent } ./pages/home/home.component
从""导入{ NotFoundComponent } ./pages/找不到/找不到。成分
const routes: Routes=[
{
路径： ,
组件：HomeComponent
},
{
路径："**",
组件：NotFoundComponent
}
]
@NgModule({
声明：[],
进口：[路由器模块。对于根(路由，{ useHash: true })]，
//导出有角的路由功能模块，因为在根模块的根组件中使用了路由器模块模块中提供的路由插座组件
导出：[路由器模块]
})
从" @ angular/平台浏览器"导入{浏览器模块}
从" @角度/核心"导入{ NgModule }
从""导入{ AppComponent } ./app.component
从""导入{ AppRoutingModule } ./app-routing.module
从""导入{ HomeComponent } ./pages/home/home.component
从""导入{ NotFoundComponent } ./pages/找不到/找不到。成分
@NgModule({
声明：[AppComponent，HomeComponent，NotFoundComponent]，
导入：[浏览器模块，批准模块],
提供商：[],
引导：[应用组件]
})
导出类应用模块{}
路由懒加载
路由懒加载是以模块为单位的。
1、创建用户模块ng g m用户路由=真一并创建该模块的路由模块
2、创建登录页面组件ng g c用户/页面/登录
3、创建注册页面组件ng g c用户/页面/注册
4、配置用户模块的路由规则
从" @角度/核心"导入{ NgModule }
从" @angular/router "导入{ Routes，RouterModule }
从""导入{ LoginComponent } ./pages/login/login.component
从""导入{ RegisterComponent } ./pages/register/寄存器。成分
const routes: Routes=[
{
路径："登录",
组件：登录组件
},
{
路径："注册",
组件：注册组件
}
]
@NgModule({
进口：[路由器模块。对于子(路线)]，
导出：[路由器模块]
})
导出类UserRoutingModule {}5，将用户路由模块关联到主路由模块
//app-routing.module.ts
const routes: Routes=[
{
路径："用户",
loadChildren: ()=import(./用户/用户。模块”).然后(m=m .用户模块)
}
]6、在导航组件中添加访问链接
一个路由链接=/用户/登录登录/a
路由器链接=/用户/注册注册/a
路由守卫
路由守卫会告诉路由是否允许导航到请求的路由。
路由守方法可以返回布尔型或可观察布尔或许诺布尔，它们在将来的某个时间点解析为布尔值。
1、CanActivate
检查用户是否可以访问某一个路由。
可以激活为接口，路由守卫类要实现该接口，该接口规定类中需要有可以激活方法，方法决定是否允许访问目标路由。
路由可以应用多个守卫，所有守卫方法都允许，路由才被允许访问，有一个守卫方法不允许，则路由不允许被访问。
创建路由守卫：ng g警卫警卫/授权
从" @角度/核心"导入{可注射}
从" @angular/router "导入{ CanActivate，ActivatedRouteSnapshot，RouterStateSnapshot，UrlTree，Router }
从" rxjs "导入{可观察的}
@可注射({
提供了："根"
})
导出类AuthGuard实现可以激活
构造器（私有路由器：路由器){}
canActivate(): boolean UrlTree {
//用于实现跳转
归还这个。路由器。创建URL tree([/用户/登录])
//禁止访问目标路由
返回错误的
//允许访问目标路由
返回真实的
}
}{
路径："关于",
组件：关于组件，
可以激活：[授权守卫]
}2、CanActivateChild
检查用户是否方可访问某个子路由。
创建路由守卫：ng g警卫警卫/行政注意：选择可以激活孩子，需要将箭头移动到这个选项并且敲击空格确认选择。
从" @角度/核心"导入{可注射}
从" @angular/router "导入{ CanActivateChild，ActivatedRouteSnapshot，RouterStateSnapshot，UrlTree }
从" rxjs "导入{可观察的}
@可注射({
提供了："根"
})
导出类管理卫士实现CanActivateChild {
canactivatedchild():boolean URL树{
返回真实的
}
}{
路径："关于",
组件：关于组件，
canActivateChild: [AdminGuard]，
儿童：[
{
路径："介绍",
组件：简介组件
}
]
}3、CanDeactivate
检查用户是否可以退出路由。
比如用户在表单中输入的内容没有保存，用户又要离开路由，此时可以调用该守卫提示用户。
从" @角度/核心"导入{可注射}
导入{
可以停用，
ActivatedRouteSnapshot，
路由器状态快照，
UrlTree
}来自" @angular/router "
从" rxjs "导入{可观察的}
导出接口CanComponentLeave {
canLeave: ()=boolean
}
@可注射({
提供了："根"
})
导出类不安全实现CanDeactivateCanComponentLeave {
cande activate(component:cancomponentlate):boolean {
if (component.canLeave()) {
返回真实的
}
返回错误的
}
}{
路径： ,
组件：HomeComponent，
可以激活：[不安全]
}从" src/app/guards/unsave.guard "导入{ CanComponentLeave }
导出类家庭组件实现CanComponentLeave {
我的表单：表单组=新表单组({
用户名：新表单控件()
})
canLeave(): boolean {
if (this.myForm.dirty) {
if (window.confirm(有数据未保存，确定要离开吗)) {
返回真实的
}否则{
返回错误的
}
}
返回真实的
}4、Resolve
允许在进入路由之前先获取数据，待数据获取完成之后再进入路由。
ng g解析器名称
从" @角度/核心"导入{可注射}
从" @angular/router "导入{解决}
type returnType=Promise { name:string }
@可注射({
提供了："根"
})
导出类ResolveGuard实现ResolvereturnType {
resolve(): returnType {
返回新承诺（功能（解决){
setTimeout(()={
解析({ name:张三 })
}, 2000)
})
}
}{
路径： ,
组件：HomeComponent，
解决：{
用户：ResolveGuard
}
}导出类HomeComponent {
构造函数（私有路由：ActivatedRoute) {}
ngOnInit(): void {
控制台。日志(这个。路线。快照。数据。用户)
}
}更多编程相关知识，请访问：编程视频！以上就是有角的学习之路由模块浅析的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。