router 和表单回顾

最新推荐文章于 2022-05-30 21:44:56 发布

extendworld

最新推荐文章于 2022-05-30 21:44:56 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/extendworld/article/details/82153944

版权

Router

Router（路由器）：为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航
RouterModule（路由器模块）：一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令
Routes（路由数组）：定义了一个路由数组，每一个都会把一个URL路径映射到一个组件
Route（路由）：定义路由器该如何根据URL模式（ pattern ）来导航到组件。大多数路由都由路径和组件类构成
RouterOutlet（路由插座）：该指令（）用来标记出路由器该在哪里显示视图
RouterLink（路由链接）：该指令用来把一个可点击的HTML元素绑定到路由。点击带有绑定到字符串或链接参数数组的routerLink指令的A标签就会触发一次导航
RouterLinkActive（活动路由链接）：当HTML元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个HTML元素添加或移除CSS类
ActivatedRoute（激活的路由）：为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）
RouterState（路由器状态）：路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法

Represents the static data associated with a particular route.

类型别名：

type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Promise<Type<any>> | Observable<Type<any>>;

路由插座

Angular 的组件路由器是一个可选的服务，它用来呈现指定的URL所对应的视图。它并不是Angular 2核心库的一部分，而是在它自己的@angular/router包中。

import { Routes, RouterModule } from ‘@angular/router’;

RouterLinkActive: routerLink变为激活状态时添加类。

可以在任意层级的组件中使用，

白屏、交互反馈差

表单：登录，地址选择(电商)，

表单的知识；验证，双向绑定，change事件，值传递。

创建FormControl实例，并且绑定到表单元素。也就是关联一个变量到表单元素。实现双向绑定

绑定变量，同时监听变化。

<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">

[(ngModel)]:双向数据绑定
[ngModel]：单向数据绑定(模型到视图)
(ngModel): 单向数据绑定(视图到模型)
单独使用ngModel时，如果没有为ngModel赋值的话，则必须存在name属性。单独ngModel的作用是通知ngForm.value，我要向你那里加入一个property，其key值是组件的name属性值，其value为空字符串。
```
<input type="text" class="form-control" id="name" [ngModel]="model.name" name="name" (ngModelChange)="model.name = $event" >
```
ngModelChange：不是 input 的事件属性，是指令 ngModel 的指令属性。

追踪和验证一组 FormControl 实例的状态。

如果这组 control 中有一个是无效的，整个就都是无效的。

AbstractControl 是上面三个类的共有父类。

FormControlName(指令)：通过name同步一个control到formGroup中。
FormGroupDirective(指令)：绑定一个存在的 formGroup 到 DOM 元素中。
FormBuilder(类)：根据用户指定到配置创建一个 AbstractControl。(group方法创建 formGroup)
每个 input 元素都有name属性，Angular 表单用它注册控件。(用于做表单验证)

Validators(类)：提供了很多的静态方法用于表单控制

还可以自己定义正则表达式来进行表单验证。

关注