糖尿病康复,内容丰富有趣,生活中的好帮手!
糖尿病康复 > angular8 路由初步

angular8 路由初步

时间:2021-05-20 16:04:32

相关推荐

angular8 路由初步

路由是什么

路由(导航)本质上是切换视图的一种机制。

路由的导航的URL是否真实存在

angular的路由借鉴了大家熟知的浏览器URL变化导致页面切换的机制

angular是单页程序,路由显示的路径不过是一种保存路由状态的机制,这个路径在web服务器上不存在。

父组件

<router-outlet></router-outlet>

路由定义

定义路由数组:路径,组件,子路由

导入RouterModule:forRoot,forChild

子路由

路径参数

配置:

{path:':tabLink',component:HomeDetailComponent}

激活:

<a [routerLink] = "['/home',tab.link,{name:'val1'}]" >..</a>this.router.navigate(['home',tab.link,{name:'val1'}])

<a [routerLink] = "['/home' [queryParams]={name:'val1'}]" >..</a>this.router.navigate(['home',{queryParams:{name:'val1'}})

URL:

http://localhost:4200/home/sports;name=val1

http://localhost:4200/home/sports?name=val1

读取:

constructor(private route: ActivatedRoute) { }

this.route.paramsMap.subscribe(params => {params.get('tabLink')})

routerLink:

<a [routerLink]="[ 'grand' ]">link to grand</a>

routerLinkActive

<a [routerLink]="[ 'grand' ]" routerLinkActive="active" [queryParams]="{name:'历史',sex:'难'}">link to grand</a>

指定的router-outlet

<a [routerLink]="[ {outlets:{second:['aux']}}]" >link to second</a>

children:[{path:'aux',component:HomeAuxComponent,outlet:'second'}]

如果觉得《angular8 路由初步》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
angular初步认识一

angular初步认识一

2019-01-18

angular初步学习

angular初步学习

2019-05-25

初步认识Angular

初步认识Angular

2024-05-27

Angular.js初步认知

Angular.js初步认知

2024-05-24