Angular
friend_ship
这个作者很懒,什么都没留下…
展开
-
浅谈前端微服务背景及Micro-app的使用
微服务架构并不只是为了在架构上好看,还可以提升开发效率,尤其是庞大的应用系统,由单一应用拆分为多个小型前端应用,每个应用可以实现独立开发和独立部署,项目维护起来也会变得容易很多。原创 2022-09-04 13:42:15 · 1580 阅读 · 0 评论 -
Angular 常用装饰器
@Injectable:TypeScript编译器保留类型元数据,Angular在运行时可以根据这些信息来注射指定的对象。否则,运行时将无法解析数据类型。如果一个 Service 里面需要依赖其他 Service,需要使用 @Injectable 装饰器进行装饰。import { Injectable } from '@angular/core';import { HttpClient } form '@angular/common/http';@Injectable()e...原创 2021-08-09 14:26:13 · 762 阅读 · 0 评论 -
Angular 表单状态及校验
在angular框架中,表单状态的含义:valid:校验成功 invalid: 校验失败 pending: 表单正在提交过程中 pristine: 数据依然处于原始状态,字段没有被修改过 dirty: 数据已经变脏了,被用户修改过了 touched: 被触摸或点击过 untouched: 未被触摸或点击 enabled: 启用状态 disabled: 禁用状态内置校验规则详情见官网文档...原创 2021-08-08 16:05:51 · 1060 阅读 · 0 评论 -
ng-zorro-antd 实现文件流上传,获取上传文件的路径
HTML页面<nz-uploadnzAccept="application/pdf,image/jpeg,image/jpg,image/png"[(nzFileList)]="fileList"[(nzAction)]="UPLOAD_FILE"[nzShowButton]="fileList.length<1"[nzBeforeUpload]="beforeUpload"(...原创 2021-06-27 10:58:46 · 2696 阅读 · 0 评论 -
Angular2-路由,组件之间传递数据
在路由中传递参数分为以下三种:第一种:在查询参数中传递数据/XXX?id=1 => ActivatedRoute.queryParams[id]第二种:在路由路径中传递数据(组件间传递数据){ path:/XXX/:id } => /XXX/1 => ActivatedRoute.snapshot.params[id]{ path:/XXX/:id } => /XXX/1 =>原创 2017-08-24 12:19:16 · 1297 阅读 · 0 评论 -
angular--路由守卫
路由器支持多种守卫:用CanActivate来处理导航到某路由的情况;用CanActivateChild处理导航到子路由的情况;用CanDeactivate来处理从当前路由离开的情况;用Resolve在路由激活之前获取路由数据;用CanLoad来处理异步导航到某特性模块的情况原创 2018-01-25 16:51:18 · 1458 阅读 · 0 评论 -
Angularjs与Angular对脏检查机制的理解
“脏检查”是Angular中的核心机制之一,它是实现双向数据绑定、MVVM模式的重要基础。AngularJS常用函数:$apply,$watch及$digest$digest是一个内部函数,正常的应用代码中是不应该直接调用它的。要想主动触发它,就要调用scope.$apply函数,它是触发Angular“脏检查机制”的常用公开接口。$digest循环实际上包括两个while循环。分别是:处...原创 2018-08-16 17:12:48 · 3514 阅读 · 0 评论 -
angularjs中ng-bind-html解析文本
渲染带html结构的字符串,使用ng-bind-html可以实现。ng-bind-html的坑:ng-bind-html指令会在运行时过滤掉一些不安全的标签来防止xxs攻击,提高安全性。所以会导致字符串的某些标签如<button></button>,<input>等不显示。解决方案:1.在angularjs中默认是不相信添加的html内容,ng-...原创 2019-09-03 10:14:13 · 729 阅读 · 0 评论 -
angularjs input checkbox复选框组的实现
如果实现方式是编辑功能需要根据返回值展示,请参考:https://mp.csdn.net/postedit/100520822第一种实现方式(如创建功能):// html代码<body ng-app="app"> <div> <--全选功能--> <input type="checkbox" name="ch...原创 2019-09-03 14:43:09 · 380 阅读 · 0 评论 -
angularjs input checkbox复选框组的实现
如果实现方式是创建功能,请参考:https://mp.csdn.net/postedit/100515989第二种实现方式(如修改功能),代码如下:// html页面代码<body ng-app="app"> <div> <input type="checkbox" name="checkbox" ng-model="all" n...原创 2019-09-03 19:17:47 · 1929 阅读 · 0 评论 -
angularjs 解决url跨域问题
当在一个产品中引入另一个页面时,一般会出现url跨域问题。解决方式代码如下:<body ng-app="app"> <div> <iframe ng-src="{{ val | trustAsResourceUrl}}" frameborder="0" width="100%" height="600px"></iframe...原创 2019-09-05 11:12:55 · 704 阅读 · 0 评论 -
ts中根据一个日期获取n天前后的日期或时间戳
第一种:获取n天前后的日期curDate: Date;this.curDate = new Date();//n天前的日期this.curDate.setDate(this.curDate()-n);// n天后的日期this.curDate.setDate(this.curDate()+n);第二种:获取n天前后的日期转换为时间戳c原创 2017-12-23 10:39:27 · 7293 阅读 · 0 评论 -
angular4自定义根据日期判断星期的管道
import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'formatDay'})export class FormatDayPipe implements PipeTransform { transform(value: any): any { if (value原创 2017-12-25 10:25:40 · 2027 阅读 · 0 评论 -
Angular延迟加载
Angular中没有模块级作用域这个概念,只有应用程序作用域和组件级作用域,这种设计主要考虑模块的扩展性,一个应用程序通常由多个模块合并而成,在@NgModule里注册的服务就可在整个应用程序内使用。 模块级作用域的一个特例:延迟加载。延迟加载使得应用程序在启动时不被载入,而是结合路由配置,在需要时才动态加载相应模块。Angular会对延迟加载模块初始化一个新的执行上下文,并创建一个新的注入器,在原创 2017-05-25 12:45:31 · 2530 阅读 · 1 评论 -
Angular2文件上传
xxx.module.ts模块 import { NgModule} from “@angular/core”; import { FileUploadModule } from “ng2-file-upload” ; import { XXXComponent } from “./xxx.component”;@NgModule({ imports:[ FileU原创 2017-07-11 10:55:42 · 4791 阅读 · 1 评论 -
angular2组件中定时刷新并清除定时器
import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core";@Component({changeDetection:ChangeDetectionStrategy.OnPush})export class xxxCompone原创 2017-07-04 17:44:59 · 9390 阅读 · 2 评论 -
Angular的变化检测
https://mp.weixin.qq.com/s?__biz=MzA5Njc0NTkwNA%3D%3D&mid=2651472436&idx=1&sn=e787ec044bc8ba7989b5eb3789ee1131&scene=45#wechat_redirect转载 2017-07-10 14:22:50 · 275 阅读 · 0 评论 -
Angular2-管道Pipe
在Angular中,管道(Pipes)可以按照指定的规则将模板内的数据进行转换。管道种类:内置管道、自定义管道等内置管道:DataPipe,JsonPipe,UpperCasePipe,LowerCasePipe,DecimalPipe,CurrencyPipe,PercentPipe,SlicePipe自定义管道:import { Pipe,PipeTransform} fr原创 2017-08-21 17:46:00 · 967 阅读 · 0 评论 -
Angular2--通配符路由
通配符路由的path是两个星号(**),它会匹配任何URL。当路由器匹配不上任何路由时会选择这个路由。路由器使用先匹配者优先的策略来选择路由。通配符路由通常是路由配置中最后一个。原创 2017-08-03 12:35:04 · 1506 阅读 · 0 评论 -
Angular2--组件生命周期
组件初始化顺序:constructorngOnChangesngOnInitngDoCheckngAfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewChecked变化检测会被多次执行的方法:ngOnChangesngDoCheckngAfterContentChecked原创 2017-09-14 14:40:22 · 539 阅读 · 0 评论 -
Angular手动安装前期准备
在开始搭建环境前,需安装Angular所依赖的基础环境Node.js ,可以在官网(https://nodejs.org/en/download/)下载安装。安装完成后,可以在命令行终端上输入以下命令:$ node -v该命令可以查看Node.js的版本,高版本的Node.js已经集成了npm,通过以下方式查看npm的版本:$ npm -v需要确认Node.js原创 2017-10-19 16:36:59 · 261 阅读 · 0 评论 -
input框只能输入数字的两种方法
通过onkeypress事件是输不上任何非数字字符 =48&&event.keyCode 通过onkeyup事件是输上后再去掉非数字字符原创 2016-09-12 16:32:21 · 106199 阅读 · 20 评论 -
angular4启动报错信息InvalidConfigError: Parsing angular-cli.json failed. Ensure the file is valid JSON
解决方案:查看angular-cli.jsonangular-cli.json文件不能添加任何注释原创 2017-12-22 09:51:29 · 690 阅读 · 0 评论 -
Angular服务注入
在根组件还是在子组件进行服务注入,该怎么选择? 取决于想让注入的依赖服务具有全局性还是局部性,由于每个注入器总是将它提供的服务维持单例,因此,如果不需要针对每个组件都提供独立的服务单例,就可以在根组件注入,整个组件树共享根注入器提供的服务实例;如果需要针对每个组件创建不同的服务实例,就应该在各子组件中配置providers元数据来注入服务。原创 2017-05-25 15:41:44 · 751 阅读 · 0 评论