期待一个富婆

我们在编写一个angular项目的时候，为了便于开发，让后台服务与代码部分看的更为清晰，可以利用PowerShell来启动服务。webstrom常规编译界面: 1、左键打开想要启动的服务->show in Explorer 2.双击启动服务的文件夹 3.按住shift键同时点击鼠标右键->Open PowerShell window here 4.打...

响应式表单共两步1.使用ts编写数据模型2.使用指令将数据模型与HTML连接编写数据模型，FormModule的3个类型类名解释FromControl基本单位，保存当前值，元素校验状态以及元素是否被修改FromGroup多个FromControl集合，可带表表单的一部分活整个表单，只要有一个FromControl对象无效，都会导致FormGroup无效，其构造...

Angular提供了两种表单处理方式模板式表单响应式表单两种表单处理方式的不同点：模板式表单：其数据模型是通过组件模板中的相关指令来定义的。因为受限于HTML的语法，只适用于简单的表单场景。响应式表单:使用ts创建底层模型，运用特定的指令将模板和底层ts数据模型绑定。模板式表单指令指令隐式创建实例ngFormFromGroupngModelFormC...

接触了一个项目，发现里面的路由配置都是用的懒加载，因为之前没有用过，所以做个一个小demo帮助梳理。首先是懒加载的好处，它需要加载的资源不会一股脑的全加载出来，而是用到什么就加载什么，这样能够大大提高效率。1.创建项目ng new lazyloading2.创建根路由文件app-router.module.tsng g m app-routing --flat --module=ap...

组件通讯需要做到组件通讯松耦合性，这样组件的重用性才高输入属性@Input()如果一个组件需要从外部接受一些东西，他应该用输入属性声明他需要的东西，至于这些东西从哪里来，组件不需要知道。就像小时候的自己，只知道索取，而获得方式并不了解。接收父组件信息，被@Input装饰器注解的属性输入属性是单向的数据传递，只能父组件传递信息给子组件，子组件无法影响父组件demo//html...

Angular的常用内置管道uppercase 转换成大写英文//html:大写转换{{myName|uppercase}}//ts:myName:string = ‘Baobab’;//输出BAOBABlowercase 转换成小写英文//html:小写转换{{myName|lowercase }}//ts:myName:string = ‘Baobab’;//输...

响应式编程是以观察者模式为核心的。观察者模式与RxJs我们在初始化可观察对象的时候，我们会向观察者对象注册一些观察者对象，当可观察对象里面发生变化时，就会调用观察者里面的一些方法，来把自己的变化告诉观察者，让观察者做一些相应的处理。这样的模式叫做观察者模式。下面这段代码是典型的观察者模式代码，我们由此介绍一些关于RxJs的概念。可观察对象Observable（流）:表示一组值或者事件...

路由传参的三种方式在查询参数中传递数据/product?id=1&name=2 => ActivatedRoute.queryParams[id]在路由路径中传递数据{path:/product/:id} => /product/1 => ActivatedRoute.params[id]在路由配置中传递数据{path:/product,componen...

数据绑定Angular默认使用单向数据绑定，双向数据绑定可选。（单向数据绑定：只从controller的值绑定到view，再view更改数据值并不会改变所有该数据的值）数据绑定分为3种绑定形式事件绑定DOM属性绑定HTML属性绑定事件绑定给一个事件指定一个处理方法等号右侧可以不是调用方法，可以是属性赋值 形如<button (click)="saved = tr...

提供器的声明方式，常用的有3种使用类：useClass{ provide: MyService, useClass: MyMockService }使用工厂：useFactory使用工厂进行注入，就需要写一个返回任意对象的函数。使用值：useValue{provide:‘API_URL’,useValue:‘http://my.api.com/v1’}demo编写一个工厂函数，...

最近遇到一个需求,大概是这个样子本来想用D3js去画，后来发现这个主要得问题在于饼状图里面的两个label是不同格式，有一个主内容和副内容，查了查也没有找到合适的方法（对不起，其实就是没画明白）。然后找了找其他插件，发现echart这个插件太好用了。他的核心也是d3，但是封装的很好，稍微改改就可以达到效果。点击可以进入官网echarts。1.安echarts插件这个自行百度吧

第一步 把第三方依赖包下到本地（以JQuery为例）npm install jquery --save第二步 把库引入到项目中去angular.json第三步 安装类型描述文件（目的是为了让ts代码认识jq和boot的代码）npm install @types/bootstrap --save-dev...

注入器每一个组件都有一个注入器实例，负责注入组件需要的对象。注入器是angular提供的一个服务类。注入器自动通过通过组件的构造函数，将注入器的对象注入进组件constructor(private productService:ProductService){...}Angular的注入器在看到这样一个构造函数声明的时候，他就会在整个Angular项目中需要这样一个叫ProductSe...

生命周期钩子其中红色代表只执行一次（初始化类型的钩子），绿色代表执行多次（检测类型钩子）钩子解释constructor实例化对象ngOnchanges初始化输入属性ngOnInit初始化（除输入属性外的）其他属性ngDoCheck组件变更检测ngAfterContentInit投影内容初始化，第一次ngDoCheck()之后调用。...

依赖注入依赖注入：Dependency Injection 简称DI首先，当使用参数是对象的方法时，需要先实例化对象，再传给方法。var person = new Person();addPerson(person);于是我们说，addPerson方法依赖Person类，而Person类注入给addPerson方法。然而，当addPerson需要多个参数时，则有//实例化对象st...

应用场景只有当用户已经登陆并拥有某些权限时才能进入某些路由一个有多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由当用户未执行保存操作而试图离开当前导航时提醒用户路由守卫分类CanActivate:处理导航到某路由的情况。当不满足CanActivate的条件时，就不导航。CanDeactivate:处理从当前路由离开...

1.声明一个路由组件(app-routing.module.ts)1.1 在新生成的项目声明ng g <project name> --routing1.2 内部项目声明ng generate module app-routing --flat --module=app2.app-routing.module.ts文件同时他会在app.module里注入这个文件3...

配置子路由子路由的配置形如 path: 'home', component: HomeComponent, children: [ { path: '', component: XxxComponent }, { path: '/yyy', component: YyyComponent } ]第一步 修改路由定义第二步 添加路由插座注意ro...

自定义校验器基本语法：xxx(params:AbstractControl):{[key:string]}:any{return null;传入参数类型是AbstractControl,是FormGroup、FormControl和FormArray的共同父类，传入参数声明了校验器用于什么对象类型上返回值类型为任意类型，其中返回对象类型中的key键是string类型，可通过errors...