angular 常用模块(详解Angular之路由基础)
angular 常用模块
详解Angular之路由基础目录
- 一、路由相关对象
- 二、路由对象的位置
- 三、路由配置
- 四、代码中通过Router对象导航
- 五、配置不存在的路径
- 六、重定向路由
- 七、在路由时候传递数据
Router和RouterLink作用一样,都是导航。Router是在Controller中用的,RouterLink是在模版中用到。
二、路由对象的位置1、Routes对象
配置在模块中。Routes由一组配置信息组成,每个配置信息至少包含两个属性,Path和Component。
2、RouterOutlet
在模版中
3、RouterLink
指令,在模版中生成链接改变URL
4、Router
在Controller中,调用Router对象的navigate方法,路由切换。
5、ActivatedRoute
路由时候通过URL传递数据,数据会保存在ActivatedRoute对象中。
三、路由配置使用ng new --routing参数时候会多生成出来一个app-routing.module.ts文件
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
会自动imports到app.module.ts中。
生成两个组件home组件和component组件。
const routes: Routes = [ {path: '', component : HomeComponent}, //路径为空 {path: 'product', component: ProductComponent} ];
注意:
1、path路径配置不能以斜杠开头,不能配置成path:'/product'。
因为Angular路由器会解析和生成url,不用/开头是为了在多个视图之间导航时能自由的使用相对路径和绝对路径。
2、在模版中写路径时,必须用/开头。
因为用斜杠加.表示要导航到根路由(/)还是子路由(./)。
/就是导航到根路由,从配置根路由那一层找。
<a [routerLink]="['/']">主页</a>
3、在<router-outlet>下面显示组件内容
4、routerLink参数是一个数组而不是字符串
因为在路由时候可以传递参数。
四、代码中通过Router对象导航模版上加一个按钮
<input type="button" value="商品详情" (click)="toProductDetails()">
controller中使用router.navigate导航。
navigate参数和routerLink参数配置一样。
import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private router:Router){ } toProductDetails(){ this.router.navigate(['/product']); } }
点按钮和点链接效果一样。
五、配置不存在的路径生成code404组件显示页面不存在。
路由匹配先匹配者优先,所以**通配符路由要放最后。
const routes: Routes = [ { path: '', component: HomeComponent }, //路径为空 { path: 'product', component: ProductComponent }, { path: '**', component: Code404Component } ];
一个地址重定向到另一个指定组件
www.aaa.com => www.aaa.com/products
www.aaa.com/x => www.aaa.com/y 用户可能已经收藏了x地址。
用重定向路由
const routes: Routes = [ { path: '', redirectTo : 'home', pathMatch:'full' }, //路径为空 { path: 'home', component: HomeComponent }, { path: 'product', component: ProductComponent }, { path: '**', component: Code404Component } ];
有3种方式
1、在查询参数中传递数据
2、在路由路径中传递数据
定义路由路径时就要指定参数名字,在实际路径中携带参数。
3、在路由配置中传递数据
以上就是详解Angular之路由基础的详细内容,更多关于Angular之路由基础的资料请关注开心学习网其它相关文章!
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular开发详解(详解Angular组件生命周期一)
- angular使用方法(Angular环境搭建及简单体验小结)
- angular模块的组成(详解Angular结构型指令模块和样式)
- vue react和angular(详解React Angular Vue三大前端技术)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular组件化(详解Angular父子组件通讯)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular简单介绍(详解Angular依赖注入)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular 常用模块(详解Angular之路由基础)
- angularjs过滤器
- angular路由树(详解Angular路由之子路由)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular教程第九讲(浅谈Angular的12个经典问题)
- 乔欣首演古装大女主,颜值演技双在线(乔欣首演古装大女主)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
热门推荐
- mysql数据库基础练习(最全50个Mysql数据库查询练习题)
- nginx怎么支持http转https(Nginx域名转发https访问的实现)
- python中的reload(搞清楚 Python traceback的具体使用方法)
- python爬虫入门代码(python爬虫基础教程:requests库二代码实例)
- reactnative ios(详解React Native与IOS端之间的交互)
- 如何使用HttpModule实现sql防注入
- <i>和<em>、<b>和<strong>的区别
- mysqldecimal类型数据转换(mysql decimal数据类型转换的实现)
- 小程序推荐ui库(AmazeUI 列表的实现示例)
- mysql自增长语句(mysql实现自增序列的示例代码)