(精华)2020年8月6日 Angular 路由的使用
发布日期:2021-06-29 15:08:58
浏览次数:3
分类:技术文章
本文共 2377 字,大约阅读时间需要 7 分钟。
Angular 中的路由
一、 Angular 创建一个默认带路由的项目
- 命令创建项目
ng new ng-demo --skip-install
- 创建需要的组件
ng g component components/homeng g component components/newsng g component components/newscontent
- 找到 app-routing.module.ts 配置路由
引入组件
import { HomeComponent } from './components/home/home.component';import { NewsComponent } from './components/news/news.component';import { ProductComponent } from './components/product/product.component';
配置路由
const routes: Routes = [{ path: 'home', component: HomeComponent},{ path: 'news', component: NewsComponent},{ path:'product', component:ProductComponent },{ path: '*', redirectTo: '/home', pathMatch: 'full' }];
- 找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由
首页 新闻
二、Angular routerLink 跳转页面默认路由
首页新闻
//匹配不到路由的时候加载的组件 或者跳转的路由{ path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home'}
三、Angular routerLinkActive 设置 routerLink 默认选中路由
首页 新闻
首页 新闻
四、动态路由
4.1.问号传参
跳转方式,页面跳转或js跳转
问号传参的url地址显示为 …/list-item?id=1queryParams属性是固定的
<a [routerLink]="[’/list-item’]" [queryParams]="{id:item.id}">
{ { item.name }}//js跳转
//router为ActivatedRoute的实例import { Router } from '@angular/router';.constructor(private router: Router) { }.this.router.navigate(['/newscontent'],{ queryParams:{ name:'laney', id:id }, skipLocationChange: true //可以不写,默认为false,设为true时路由跳转浏览器中的url会保持不变,传入的参数依然有效});
获取参数方式
import { ActivatedRoute } from '@angular/router';constructor(public route:ActivatedRoute) { }ngOnInit() { this.route.queryParams.subscribe((data)=>{ console.log(data); })}
4.2 路径传参
路径传参的url地址显示为 …/list-item/1
<a [routerLink]="[’/list-item’, item.id]">
{ { item.name }}//js跳转
//router为ActivatedRoute的实例this.router.navigate([’/list-item’, item.id]);
路径配置:
{path: ‘list-item/:id’, component: ListItemComponent}获取参数方式
this.route.params.subscribe( param => { this.id= param['id']; })
五、父子路由
- 创建组件引入组件
import { WelcomeComponent } from ‘./components/home/welcome/welcome.component’;
import { SettingComponent } from ‘./components/home/setting/setting.component’;- 配置路由
{ path:'home', component:HomeComponent, children:[{ path:'welcome', component:WelcomeComponent },{ path:'setting', component:SettingComponent }, { path: '**', redirectTo: 'welcome'} ]},
- 父组件中定义router-outlet
转载地址:https://codeboy.blog.csdn.net/article/details/107852357 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年04月03日 15时31分46秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
这是美国MarTech最大的一家独立公司:HubSpot
2019-04-29
从开发到产出:关于机器学习的七则干货建议
2019-04-29
你想成为数据科学家吗?不要把机器学习当成入门第一课
2019-04-29
你想成为数据科学家吗?不要把机器学习当成入门第一课
2019-04-29
现代社会悖论:信息泛滥是一只不守规矩的野兽
2019-04-29
如何设计自己的第一个加密交易机器人?
2019-04-29
浪费在Excel上的时间:如何开始专家式机器学习实验追踪?
2019-04-29
失业三星期:我寻找第二份编程工作之路
2019-04-29
跳过媒介,我们能不能只用思想控制计算机?
2019-04-29
服务器宕机:谷歌最近经历了“黑客攻击”吗?
2019-04-29
RepVGG:极简架构,SOTA性能,让VGG式模型再次伟大
2019-04-29
提升查询技能,这7条SQL查询错误必须解决
2019-04-29
TKDE 2020 | 综述:基于知识图谱的推荐系统
2019-04-29
休息时间!哪些业余活动能提升开发人员的技能?
2019-04-29
把人脑“森林”上传到计算机:人类脑计划只是一个科幻野心?
2019-04-29
智力测试:如何超越动物之智?
2019-04-29
事关人类生存?为什么要探寻AI系统的可解释性?
2019-04-29
安全工程师必知:常见Java漏洞有哪些?
2019-04-29
数据科学中的计量经济学技术
2019-04-29
突破边界:数据科学、数据工程和技术的未来
2019-04-29