Angular中路由和表单的示例分析
这篇文章主要介绍Angular中路由和表单的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联是一家专注于成都网站建设、成都网站制作与策划设计,大石桥网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:大石桥等地区。大石桥做网站价格咨询:18980820575
Angular的路由介绍
在单页面应用中,需要在定义好的不同视图中(组件)来回切换,而不用去服务器中获取新页面,要实现从一个视图到另外一个视图的导航,就需要使用到Angular中的Router。
需要路由跳转的场景:
假如页面上有两个跳转链接,我们希望点击这些链接的时候可以分别跳转到
商品列表页面
和个人中心页面
。我们可以先创建两个组件分别是 GoodsListComponent和PersonalCenterComponent。具体流程如下所示:
路由创建
1、新建文件app-routing.module.ts,将要跳转的视图配置放到里边
import { NgModule } from '@angular/core'; // 引入路由模块 RouterModule和 Routes import { Routes, RouterModule } from '@angular/router'; // 引入在不同URL下,需要展示的组件 import { GoodsListComponent } from './goods-list/goods-list.component'; import { PersonalCenterComponent } from './personal-center/personal-center.component'; // 配置的路由数组 const routes: Routes = [ { path: 'goodsList', // 定义路由名称 component: GoodsListComponent, // 指定显示的那个组件 }, { path: 'personalCenter', // 定义路由名称 component: PersonalCenterComponent, // 指定显示的那个组件 } ]; @NgModule({ // forRoot() 方法会创建一个 NgModule,其中包含所有指令、给定的路由以及 Router 服务本身。 imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}
在
Routes 数组
中定义你的路由(这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了相对应的路径下需要显示的组件)
2、在app.module.ts中导入AppRoutingModule
import { AppRoutingModule } from './app-routing.module';
3、在app.component.html中把这些路由添加进来,以便控制导航的展示
件。
接下来,在模板中添加
标签。该元素会通知 Angular,你可以用所选路由的组件更新应用的视图。用法和组件一样,充当占位符,用来标记路由器应该把组件显示到那个位置上。
路由中两个重要API的介绍
ActivatedRoute
用于获取路由信息,它所包含路由的信息比如: 路由参数,静态数据...具体提供的方法可参照ActivatedRoute官网
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; // ① 先引入ActivatedRoute @Component({ selector: 'app-goods-list', templateUrl: './goods-list.component.html', styleUrls: ['./goods-list.component.scss'] }) export class GoodsListComponent implements OnInit { constructor( private route: ActivatedRoute, // ② 依赖注入这个服务 ) {} // ③ 在初始化的生命周期中去或者url的路由信息 public ngOnInit(): void { // 第一种获取参数的方式 const params = this.route.snapshot.params; // 第二种获取参数的方式 this.route.params.subscribe(params => { console.log(params); }); } }
上述两种获取参数方法的区别和使用:
route.snapshot:
需要直接访问参数,主要获取
初始值
,不用订阅的情况下用snapshot;route.params.subscribe():
参数每次变化都要获取到或者需要连续导航多次的时候的用params;
Router
是一个提供导航和操纵URL的模块,具体提供的方法可参照Router官网,开发中常用到的方法如下,具体讲解在路由传参中会详细介绍:
// 使用前,需要在组件中先引入Router这个服务类 import { Router } from '@angular/router';
navigate()该方法支持的参数类型和routerLink指令一样,所以他们的作用也是一样的;
navigateByUrl()绝对路由;
每次导航前都会调用events方法;(暂时仅了解)
路由传参以及获取
路由传参的两种形式
1. params (是/:id 动态路由)
使用场景:比如当我们点击商品列表链接时,希望把用户信息,或者商品种类信息通过url,传到商品列表的组件中去。
// 需要配置路由 const routes: Routes = [ { path: 'goodsList/:id', // 定义路由名称 component: GoodsListComponent, // 指定显示的那个组件 }, ];
2. queryParams(是?id=xx 形式)
使用场景:当我们希望通过url传递多个参数的时候,可以选择用这种方式进行路由传参
1个参数可以优先用动态路由,2个以上还是用query更加方便点
路由中传参的3种具体方法
1. routerLink
单一参数:
切换到商品列表组件 // 其中/goodsListl是我设置的路由path,id是需要传递的参数 // 多个参数的时候,也可以用这种形式,只不过看起来不够直观,所以不推荐多个参数的时候也用这种方法
多个参数:
切换到个人中心组件 // 参数的格式可以自行组织成各种object
routerLinkActive
跟踪元素上链路路由当前是否处于活动状态
。并允许你指定一个或者多个css类,以便在链接路由处于活动状态时添加该元素。
2. router.navigate
基于所提供的命令数组和起点路由进行导航。 如果没有指定起点路由,则从根路由开始进行绝对导航
单一参数:
public goToGoodsListPage(): void { // 第一种方式 this._router.navigate([`/goodsList/${this.id}`]); // 第二种方式 与第一种方式达到相同的效果 this._router.navigate(['/goodsList', this.id]); } // html中调用这个方法,等同于使用a标签的routerLink属性
多个参数:
public goToPersonalCenterPage(): void { this._router.navigate(['/personalCenter'], {queryParams:{name: 'zs', age: 16}}); } // html中调用
3. router.navigateByUrl
基于所提供的 URL 进行导航,必须使用
绝对路径
。对于单一参数和多个参数的使用方法与router.navigate一致。
// 传的第一个参数是数组的形式,而navigate的第一个参数是数组的方式 // 他的传参目前是拼接在url上边的 public goToPersonalCenterPage(): void { this._router.navigateByUrl(`/personalCenter?name=zs&age=16`); }
在路由中接收参数的2种方式
1. 接收params类型的参数
import { ActivatedRoute } from '@angular/router'; constructor( private _route: ActivatedRoute, ) {} public ngOnInit(): void { // 第一种只获取初始值方式 const param = this.route.snapshot.params; // 第二种动态获取方式 this.route.params.subscribe(params => { console.log(params); }); }
2. 接收queryParams类型的参数
import { ActivatedRoute } from '@angular/router'; constructor( private _route: ActivatedRoute, ) {} public ngOnInit(): void { // 第一种只获取初始值方式 const queryParam = this.route.snapshot.queryParams; // 第二种动态获取方式 this.route.queryParams.subscribe(params => { console.log(params); }); }
路由重定向
应用场景:当在一个应用中,希望用户默认跳转到某个页面时,就需要使用得到路由重定向。
重定向的组成:
使用重定向源的path
重定向目标的component
pathMatch值来配置路由
{ path: '', redirectTo: '/personalCenter', pathMatch: 'full' }, // 重定向到 `personalCenter`
pathMatch是一个用来指定路由匹配策略的字符串。可选项有 prefix(默认值)和 full。
prefix: 以指定的路径开头 (就是path中的值与用户输入的的开头路径是一样的,比如path是”abc“,那么用户输入/abc, /abc/a都是可以的,但是输入 /abcd这样就不可以); 如果path是空,那么所有路由都会匹配到这个页面上
full: 与指定路径完全一样(这个就要求与path要求的路径完全一样,比如说path是‘abc’,那么用户输入/abc , /abc/是可以的 /abcd,/abc/d是不可以的); 如果path是空,那么只有localhost:4200后边什么都不加的情况下才匹配到这个页面上。
路由顺序
Router在匹配路由的时候,使用的是”先到先得“的策略,所以应当将具体的静态的路由放前边,然后可以放置默认路由匹配的空路径路由,通配符路由是最后一个(他可以匹配所以路由,当其他路由都没有匹配对的时候,Router才会选择他)
const routes: Routes = [ // 静态路由 { path: 'goodsList/:id', component: GoodsListComponent, }, { path: 'personalCenter', component: PersonalCenterComponent, }, // 默认空路径路由 { path: '', redirectTo: '/personalCenter', pathMatch: 'full' }, // 通配符路由 { path: '**', component: PageNotFoundComponent }, ];
路由嵌套
当应用变的复杂的时候,可能需要创建一些根组件之外的相对路由,这些路由成为子路由,这意味着在项目中需要添加第二个
场景:我们需要在个人中心的页面中,跳转到他的两个子页面中,分别是个人配置页面和个人详情页面,具体代码实现如下所示:
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { GoodsListComponent } from './goods-list/goods-list.component'; import { PersonalCenterComponent } from './personal-center/personal-center.component'; import { PersonalSettingComponent } from './personal-setting/personal-setting.component'; import { PersonalDetailComponent } from './personal-detail/personal-detail.component'; const routes: Routes = [ { path: 'goodsList/:id', component: GoodsListComponent, }, { path: 'personalCenter', component: PersonalCenterComponent, children: [ // 主要是这里添加了一个children数组,用来存放子路由 { path: 'personalDetail', component: PersonalDetailComponent, }, { path: 'personalSetting', component: PersonalSettingComponent, }, ] }, { path: '', redirectTo: '/personalCenter', pathMatch: 'full' }, ]; // 个人中心的html中,需要新增从而来指定子页面展示的位置
子路由和其它路由一样,同时需要 path 和 component。唯一的区别是你要把子路由放在父路由的
children
数组中。
路由懒加载
你可以配置路由定义来实现惰性加载模块,这意味着 Angular只会在需要时才加载这些模块,而不是在应用启动时就加载全部。
1、先给之前的两个页面组件增加一个module文件,然后routes中使用loadChildren代替component进行配置
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'goodsList/:id', loadChildren: () => import('./goods-list/goods-list.module') .then(m => m.GoodListModule) }, { path: 'personalCenter', loadChildren: () => import('./personal-center/personal-center.module') .then(m => m.PersonalCenterModule) }, { path: '', redirectTo: '/personalCenter', pathMatch: 'full' }, ]; @NgModule({ // forRoot() 方法会创建一个 NgModule,其中包含所有指令、给定的路由以及 Router 服务本身。 imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}
2、在之前的两个页面组件中添加路由模块文件,添加一个指向该组件的路由。
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { GoodsListComponent } from './goods-list.component'; const routes: Routes = [ { path: '', component: GoodsListComponent }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class GoodsListRoutingModule { }
路由守卫(仅了解)
使用路由守卫来防止用户未经授权就导航到应用的某些部分,想了解更多请移步 路由守卫官网介绍
用CanActivate来处理导航到某路由的情况。 // 进入路由的时候
用CanActivateChild来处理导航到某子路由的情况。
用CanDeactivate来处理从当前路由离开的情况. // 离开路由的时候
用Resolve在路由激活之前获取路由数据。
用CanLoad来处理异步导航到某特性模块的情况。CanActivate仍然会加载某个模块,canload不会去加载当不满足条件的情况下
export class TestGuard implements CanActivate { canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { //判断是否可以进入某个路由的逻辑 } }
{ path: 'test-path', component: TestComponent, canActivate: [TestGuard], // 使用路由守卫guard }
路由事件(仅了解)
Router 在每次导航过程中都会通过 Router.events 属性发出导航事件。这些事件的范围贯穿从导航开始和结束之间的多个时间点。想了解更多请移步
路由事件官网详细介绍
https://angular.cn/guide/router-reference#router-events
Angular中的表单介绍
响应式表单与模板驱动表单的区别
响应式 | 模板驱动 | |
---|---|---|
建立表单模型 | 显示的,在组件类中创建 | 隐式的,有指令创建 |
数据模型 | 结构化和不可变的(可观察对象) | 非结构化和可变的(数据双向绑定) |
数据流 | 同步 | 异步 |
表单验证 | 函数 | 指令 |
常用表单公共基础类
响应式表单和模板驱动表单都建立在下列基础类之上。
FormControl 实例用于追踪单个表单控件的值和验证状态。
FormGroup 用于追踪一个表单控件组的值和状态。
FormArray 用于追踪表单控件数组的值和状态。(了解)
模板驱动表单
依赖模板中的指令来创建和操作底层的对象模型。主要用于添加简单的表单,使用起来较简单,但是扩展性方面不如响应式表单。当控件值更新的时候相关的属性值会被修改为新值。