angular 获取工程路径4怎么设置路径别名

在AngularJS路由控制的HTML5 Mode下,&a&链接使用绝对路径和相对路径有什么区别吗? - 知乎5被浏览3607分享邀请回答2添加评论分享收藏感谢收起Angular4 ngrxstore简介和安装
时间: 11:19:58
&&&& 阅读:422
&&&& 评论:
&&&& 收藏:0
标签:&&&&&&1 ngrx store 简介对于ngrx store 在angualr2/4 的官方文档介绍不多。所以我在这里简单介绍一下ngrx store的概念。ngrx store 是借用redux 对于single page application的状态管理(state management)理念并且结合了rxjs来实现的。随着single page application &(单页web应用)变得越来越复杂,前端对于state management(状态管理) 变得日益困难。 传统的mvc 结构框架没法轻易解决前端对于数据的处理,不同于j2ee 应用,不同页面的数据交互可以通过session 或者cookie 来解决。 在angualr里面不同component ,module(模块)间的交互,最常用的是使用service 来共享数据。 但是随着component 和模块的增多。 service对于共享数据的处理让应用变得越来越混论和难以管理。所以ngrx-store 横空出世, 用来解决发杂的单页应用的状态管理。State manage(状态管理) 有三个原则1 Single source of truth(单一状态对象)这个原则是整个单页应用的状态通过object tree(对象树)的形式存储在store 里面。这个定义十分抽象其实就是把所有需要共享的数据通过javascript 对象的形式存储下来例子state&=
&&&&application:‘angular4‘,
&&&&shoppingList:[‘iphone‘.‘HTC‘]
}2state is read-only(状态只能是只读形式)这个ngrx-store 核心之一就是用户不能直接修改状态内容。 举个例子,如果我们需要保存了登录页面状态,状态信息需要记录登录用户的名字。 当登录名字改变,我们不能直接修改状态保存的用户名字state={‘username‘:‘kat‘},
//用户重新登录别的账户为tom
state.username&=&‘tom‘&&//在ngrx&store&这个行为是绝对不允许的那么你也许会为,不这样修改我怎么修改啊? 这里ngrx 引入了一个action的概念。通过store.dispatch(action)触发修改。 之后我会使用例子说明3 changes are made with pure functions(只能通过调用函数来改变状态)由于不能直接需改状态,ngrx store 同时引入了一个叫做reducer(聚合器)的概念。通过reducer 来修改状态。function&reducer(state&=&‘SHOW_ALL‘,&action)&{
&&switch&(action.type)&{
&&&&case&‘SET_VISIBILITY_FILTER‘:
&&&&&&return&Object.assign({},newObj);&&
&&&&&&default:
&&&&&&return&state&&}}4 如何安装ngrx storenpm&install&@ngrx/core&@ngrx/store&--save4.1 如果你使用的angular-cli 那么webpack会自动帮你处理配置你只需要import 就可以使用import&{&Store&}&from&‘@ngrx/store‘;4.2 如果你使用时旧版的systemjs文件的那么你需要添加map:&{
&&&&‘@ngrx/store‘:&‘nodemodules/@ngrx/store/**/bundles/*.js‘,
&&}本文出自 “” 博客,请务必保留此出处标签:&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码!在 SegmentFault,解决技术问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们,都在这里:
获取验证码
已有账号?
标签:至少1个,最多5个
表单是几乎每个 Web 应用程序的一部分。虽然 Angular 为我们提供了几个内置 validators (验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定义验证功能。接下来我们将着重介绍,如何自定义 validator 指令。
Built-in Validators
Angular 提供了一些内置的 validators,我们可以在 Template-Driven 或 Reactive 表单中使用它们。如果你对 Template-Driven 和 Reactive 表单还不了解的话,可以参考 Angular 4.x Forms 系列中
这两篇文章。
在写本文时,Angular 支持的内建 validators 如下:
required - 设置表单控件值是非空的
email - 设置表单控件值的格式是 email
minlength - 设置表单控件值的最小长度
maxlength - 设置表单控件值的最大长度
pattern - 设置表单控件的值需匹配 pattern 对应的模式
在使用内建 validators 之前,我们需要根据使用的表单类型 (Template-Driven 或 Reactive),导入相应的模块,对于 Template-Driven 表单,我们需要导入 FormsModule。具体示例如下:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, FormsModule], // we add FormsModule here
declarations: [AppComponent],
bootstrap: [AppComponent]
export class AppModule {}
一旦导入了 FormsModule 模块,我们就可以在应用中使用该模块提供的所有指令:
&form novalidate&
&input type="text" name="name" ngModel required&
&input type="text" name="street" ngModel minlength="3"&
&input type="text" name="city" ngModel maxlength="10"&
&input type="text" name="zip" ngModel pattern="[A-Za-z]{5}"&
而对于 Reactive 表单,我们就需要导入 ReactiveFormsModule 模块:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
export class AppModule {}
可以直接使用 FormControl 和 FormGroup API 创建表单:
@Component()
class Cmp {
form: FormG
ngOnInit() {
this.form = new FormGroup({
name: new FormControl('', Validators.required)),
street: new FormControl('', Validators.minLength(3)),
city: new FormControl('', Validators.maxLength(10)),
zip: new FormControl('', Validators.pattern('[A-Za-z]{5}'))
也可以利用 FormBuilder 提供的 API,采用更便捷的方式创建表单:
@Component()
class Cmp {
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
name: ['', Validators.required],
street: ['', Validators.minLength(3)],
city: ['', Validators.maxLength(10)],
zip: ['', Validators.pattern('[A-Za-z]{5}')]
需要注意的是,我们还需要使用 [formGroup] 指令将表单模型与 DOM 中的表单对象关联起来,具体如下:
&form novalidate [formGroup]="form"&
接下来我们来介绍一下如何自定义 validator 指令。
Building a custom validator directive
在实际开发前,我们先来介绍一下具体需求:我们有一个新增用户的表单页面,里面包含 4 个输入框,分为用于保存用户输入的 username、email、password、confirmPassword 信息。具体的 UI 效果图如下:
Setup (基础设置)
1.定义 user 接口
export interface User {
username: // 必填,5-8个字符
email: // 必填,有效的email格式
password: // 必填,值要与confirmPassword值一样
confirmPassword: // 必填,值要与password值一样
2.导入 ReactiveFormsModule
app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './ponent';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
export class AppModule { }
3.初始化 AppComponent
<ponent.html
&h3&Add User&/h3&
&form novalidate (ngSubmit)="saveUser()" [formGroup]="user"&
&label for=""&Username&/label&
&input type="text" formControlName="username"&
&div class="error" *ngIf="user.get('username').invalid &&
user.get('username').touched"&
Username is required (minimum 5 characters, maximum 8 characters).
&!--&pre *ngIf="user.get('username').errors" class="margin-20"&
{{ user.get('username').errors | json }}&/pre&--&
&label for=""&Email&/label&
&input type="email" formControlName="email"&
&div class="error" *ngIf="user.get('email').invalid && user.get('email').touched"&
Email is required and format should be &i&24065****@qq.com&/i&.
&!--&pre *ngIf="user.get('email').errors" class="margin-20"&
{{ user.get('email').errors | json }}&/pre&--&
&label for=""&Password&/label&
&input type="password" formControlName="password"&
&div class="error" *ngIf="user.get('password').invalid &&
user.get('password').touched"&
Password is required
&!--&pre *ngIf="user.get('password').errors" class="margin-20"&
{{ user.get('password').errors | json }}&/pre&--&
&label for=""&Retype password&/label&
&input type="password" formControlName="confirmPassword" validateEqual="password"&
&div class="error" *ngIf="user.get('confirmPassword').invalid &&
user.get('confirmPassword').touched"&
Password mismatch
&!--&pre *ngIf="user.get('confirmPassword').errors" class="margin-20"&
{{ user.get('confirmPassword').errors | json }}&/pre&--&
&button type="submit" class="btn-default" [disabled]="user.invalid"&Submit&/button&
<ponent.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
export interface User {
username: // 必填,5-8个字符
email: // 必填,有效的email格式
password: // 必填,值要与confirmPassword值一样
confirmPassword: // 必填,值要与password值一样
@Component({
moduleId: module.id,
selector: 'exe-app',
templateUrl: 'ponent.html',
styles: [`
padding: 4
.btn-default {
background-color: #3845e2;
.btn-default:disabled {
background-color: #
export class AppComponent implements OnInit {
public user: FormG
constructor(public fb: FormBuilder) { }
ngOnInit() {
this.user = this.fb.group({
username: ['', [Validators.required, Validators.minLength(5),
Validators.maxLength(8)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required]],
confirmPassword: ['', [Validators.required]]
saveUser(): void {
Custom confirm password validator
接下来我们来实现自定义 equal-validator 指令:
equal-validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[validateEqual][formControlName],[validateEqual][formControl],
[validateEqual][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() =& EqualValidator),
multi: true }
export class EqualValidator implements Validator {
constructor(@Attribute('validateEqual') public validateEqual: string) { }
validate(c: AbstractControl): { [key: string]: any } {
// self value (e.g. retype password)
let v = c. // 获取应用该指令,控件上的值
// control value (e.g. password)
let e = c.root.get(this.validateEqual); // 获取进行值比对的控件
// value not equal
if (e && v !== e.value)
validateEqual: false
上面的代码很长,我们来分解一下。
Directive declaration
@Directive({
selector: '[validateEqual][formControlName],[validateEqual]
[formControl],[validateEqual][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() =& EqualValidator),
multi: true }
首先,我们使用 @Directive 装饰器来定义指令。然后我们设置该指令的 Metadata 信息:
selector - 定义指令在 HTML 代码中匹配的方式
providers - 注册EqualValidator
其中 forwardRef 的作用,请参考 -
Class defintion
export class EqualValidator implements Validator {
constructor(@Attribute('validateEqual') public validateEqual: string) {}
validate(c: AbstractControl): { [key: string]: any } {}
我们的 EqualValidator
类必须实现 Validator 接口:
export interface Validator {
validate(c: AbstractControl): ValidationErrors|
registerOnValidatorChange?(fn: () =& void):
该接口要求定义一个 validate() 方法,因此我们的 `EqualValidator
类中就需要实现 Validator
接口中定义的 validate 方法。此外在构造函数中,我们通过 @Attribute('validateEqual') 装饰器来获取 validateEqual 属性上设置的值。
Validate implementation
validate(c: AbstractControl): { [key: string]: any } {
// self value (e.g. retype password)
let v = c. // 获取应用该指令,控件上的值
// control value (e.g. password)
let e = c.root.get(this.validateEqual); // 获取进行值比对的控件
// value not equal
if (e && v !== e.value)
return { // 若不相等,返回验证失败信息
validateEqual: false
Use custom validator
要在我们的表单中使用自定义验证器,我们需要将其导入到我们的应用程序模块中。
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { EqualValidator } from './equal-validator.directive';
import { AppComponent } from './ponent';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent, EqualValidator],
bootstrap: [AppComponent]
export class AppModule { }
以上代码成功运行后,我们来验证一下刚实现的功能:
友情提示:演示需要先把密码框的类型设置为text
看起来一切很顺利,但请继续看下图:
什么情况,password 输入框的值已经变成 12345 了,还能验证通过。为什么会出现这个问题呢?因为我们的只在 confirmPassword 输入框中应用
validateEqual 指令。所以 password 输入框的值发生变化时,是不会触发验证的。接下来我们来看一下如何修复这个问题。
我们将重用我们的 validateEqual 验证器并添加一个 reverse 属性 。
&label for=""&Password&/label&
&input type="text" formControlName="password" validateEqual="confirmPassword"
reverse="true"&
&div class="error" *ngIf="user.get('password').invalid &&
user.get('password').touched"&
Password is required
&!--&pre *ngIf="user.get('password').errors" class="margin-20"&
{{ user.get('password').errors | json }}&/pre&--&
&label for=""&Retype password&/label&
&input type="text" formControlName="confirmPassword" validateEqual="password"&
&div class="error" *ngIf="user.get('confirmPassword').invalid &&
user.get('confirmPassword').touched"&
Password mismatch
&!--&pre *ngIf="user.get('confirmPassword').errors" class="margin-20"&
{{ user.get('confirmPassword').errors | json }}&/pre&--&
若未设置 reverse 属性或属性值为 false,实现的功能跟前面的一样。
若 reverse 的值设置为 true,我们仍然会执行相同的验证,但错误信息不是添加到当前控件,而是添加到目标控件上。
在上面的示例中,我们设置 password 输入框的 reverse 属性为 true,即 reverse="true"。当 password 输入框的值与 confirmPassword 输入框的值不相等时,我们将把错误信息添加到 confirmPassword 控件上。具体实现如下:
equal-validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[validateEqual][formControlName],[validateEqual][formControl],
[validateEqual][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() =& EqualValidator),
multi: true }
export class EqualValidator implements Validator {
constructor(@Attribute('validateEqual') public validateEqual: string,
@Attribute('reverse') public reverse: string) { }
private get isReverse() {
if (!this.reverse)
return this.reverse === 'true';
validate(c: AbstractControl): { [key: string]: any } {
// self value
let v = c.
// control vlaue
let e = c.root.get(this.validateEqual);
// value not equal
// 未设置reverse的值或值为false
if (e && v !== e.value && !this.isReverse) {
validateEqual: false
// value equal and reverse
// 若值相等且reverse的值为true,则删除validateEqual异常信息
if (e && v === e.value && this.isReverse) {
delete e.errors['validateEqual'];
if (!Object.keys(e.errors).length) e.setErrors(null);
// value not equal and reverse
// 若值不相等且reverse的值为true,则把异常信息添加到比对的目标控件上
if (e && v !== e.value && this.isReverse) {
e.setErrors({ validateEqual: false });
以上代码运行后,成功解决了我们的问题。其实解决该问题还有其它的方案,我们可以基于 password 和 confirmPassword 来创建 FormGroup 对象,然后添加自定义验证来实现上述的功能。详细的信息,请参考 - 。
1 收藏&&|&&4
你可能感兴趣的文章
4 收藏,1.1k
5 收藏,1.5k
48 收藏,4.4k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
楼主,其实可以把password和confirmpassword放到同一个formgroup一起验证,这样更方便。
楼主,其实可以把password和confirmpassword放到同一个formgroup一起验证,这样更方便。
文章结尾有介绍在创建FormGroup时,自定义同步的验证器哈
文章结尾有介绍在创建FormGroup时,自定义同步的验证器哈
@semlinker 哦哦,不好意思,没看仔细。楼主写得很棒!
@semlinker 哦哦,不好意思,没看仔细。楼主写得很棒!
分享到微博?
我要该,理由是:在 SegmentFault,解决技术问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们,都在这里:
获取验证码
已有账号?
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
项目中有很多请求的路径,其中url的域名部分有相同的,如何创建一个文件存放这些公共部分,方便以后维护?
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
根级维护一个url类
@Injectable()
export class HttpData {
HOST:string
constructor(){
this.HOST = 'XXXXX'
根模块注声明注入
@NgModule({
providers: [ HttpData ],
直接在某个组件或服务使用即可
class XXComponent {
constructor(private httpData:HttpData) {
console.log(httpData.HOST)
你也可以在声明注入时使用别名
providers: [{provide: 'NICKNAME', useClass: HttpData}]
直接在某个组件或服务使用即可
class XXComponent {
constructor(@Inject('NICKNAME') private httpData:HttpData) {
console.log(httpData.HOST)
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:}

我要回帖

更多关于 angularjs 图片路径 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信