angular
改个名字888777
这个作者很懒,什么都没留下…
展开
-
【工厂模式】
组合工厂函数创建对象工厂函数:返回一个对象的函数。工厂模式是用来创建对象的一种最常用的设计模式,我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。组合的工厂函数:在一个工厂函数中定义另外一个工厂函数。工厂函数允许我们从计算中分离我们的数据:定义一个新的函数,它接受一个对象作为参数并返回一个修改的版本。This means we’ll al...原创 2020-04-28 17:51:56 · 132 阅读 · 0 评论 -
NATS发布/订阅机制 【消息中间件】
1.安装并运行NATS Streaming服务器(nats-streaming-server)% brew install nats-streaming-server // 安装% nats-server // 启动要是出现Command not found错误:export PATH=$PATH:/usr/local/nats-server/bin要是默认的4222端...原创 2020-02-22 18:08:39 · 1334 阅读 · 0 评论 -
uuid
定义UUID,通用唯一识别码(Universally Unique Identifier)的缩写版本号:在angular中使用import { Component, OnInit } from "@angular/core";import { v4 as uuid } from "uuid";// const myId = uuid.v4(); // import ...原创 2019-11-28 10:39:34 · 423 阅读 · 0 评论 -
Angular 基础
组件和服务都是简单的类,这些类使用装饰器来标出它们的类型,并提供元数据以告知 Angular 该如何使用它们。组件类的元数据将组件类和一个用来定义视图的模板关联起来。服务类的元数据提供了一些信息,Angular 要用这些信息来让组件可以通过依赖注入(DI)使用该服务。原创 2018-10-28 22:59:53 · 204 阅读 · 0 评论 -
angular中使用token来保存登录状态
JWT :是 JSON Web Tokens 的简称。该Token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于认证,也可被加密。要先引入一个库,然后路由守卫,然后在请求方法中、或者拦截器中配置添加token到请求头。客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里.原创 2020-06-25 19:58:10 · 3946 阅读 · 0 评论 -
封装zorro的对话框
目的:在web页面经常会使用到弹对话框功能,如对机器上报的错误码的处理,因此将其封装为一个service,便于管理、使用。原创 2020-05-10 21:35:45 · 923 阅读 · 0 评论 -
angular变化检测机制 【default策略,Onpush策略】
首先,数据发生变化被NgZone服务捕获NgZone服务通知Angular有数据发生改变Angular接收到有数据发生了变化的信号,对组件执行变更监测处理【当组件实例化之后,Angular 就会创建一个变更检测器,它负责传播组件各个绑定值的变化。】原创 2019-11-01 18:15:18 · 967 阅读 · 0 评论 -
点击切换数据流的传递方式 angular 自上而下传递无返回值的函数
从父组件【input】进去的数据, 如果在子组件修改的话,父组件访问到的也是改变后的数据,而不是修改前。思想:自上而下传递无返回值的函数,赋予下层修改上层值的方法,即可在上层维护下层组件的状态信息。每层只需知道子组件本身需更新的信息。现有1个父组件F,2个子组件S1, S2。当点击S1的卡片,S2要知道被选中,显示对应的页面。此时应在父组件维护数据信息,把修改的方法通过[input]传给子...原创 2019-12-14 19:50:02 · 204 阅读 · 0 评论 -
函数式编程
函数式编程的主要设计点在于避免使用状态和可变的数据,即 stateless and immutable。RXJS:响应式编程抽象出了流这个概念,提高了代码的抽象级别,我们不用去关心大量的实现细节,而专注于对数据流的操作。原创 2019-10-11 20:14:00 · 162 阅读 · 0 评论 -
rxjs with angular
父组件:<div *ngIf="monitor$ | async as monitor"><app-titlebar [monitorMessage$]=[monitor$]></app-titlebar></div>子组件 title-bar:@Input() monitorMessage$: Observable<Mon...原创 2019-12-24 17:56:48 · 254 阅读 · 0 评论 -
绑定dom angular 【结构型指令】@ViewChild ElementRef *ngTemplateOutlet
ngAfterViewInit() { fromEvent<WheelEvent>( this.el.nativeElement.querySelector('.title-box'), 'wheel' ) .pipe(filter(e => e.deltaY > 0)) .subscribe(() =>...原创 2019-10-15 16:54:32 · 470 阅读 · 1 评论 -
路由相关 【emit data from router-outlet】【get param from url】 this.router.events.subscribe()
@Injectable({ providedIn: 'root' })export class TitleBarService { hasLoadedFinshed?: boolean; constructor() {}}@Injectable({ providedIn: 'root', deps: [TitleBarService]})export class Ti...原创 2019-11-08 16:01:48 · 592 阅读 · 0 评论 -
【gql】【apollo-angular】【以我们的业务为例】
参考http://www.freesion.com/article/6294160843/http://www.freesion.com/article/9311199691/定义GraphQL 是一款由 Facebook 主导开发的数据查询和操作语言, 写过 SQL 查询的同学可以把它想象成是 SQL 查询语言,但 GraphQL 是给客户端查询数据用的。虽然这让你听起来觉得像是...原创 2019-11-27 19:44:12 · 959 阅读 · 0 评论 -
对表单的抽象 【表单输入】【表单回调函数处理】
updateAir<K extends keyof calibration.CTCalibrationParameter.Air>( key: K, value: calibration.CTCalibrationParameter.Air[K] ) { this.air[key] = value; }马克,之后补上说明...原创 2020-03-11 14:12:20 · 372 阅读 · 0 评论 -
一次code review【keyword: messageOfType】
原代码:this.warmProgressEvents$=this.service.ctsMachine.warmUp.events$.pipe(filter(x=>x.__typename===warmUp.CTWarmUpMessageTypes.CTWarmUpProgress),map(x=>(x as warmUp.CTWarmUpProgress).progres...原创 2020-03-10 10:59:16 · 305 阅读 · 0 评论 -
how Angular application connects to JAVA EE(开发中,未完成...)
环境 前端 Angular 后端 Java 数据库 MySQL 消息通信系统 NATS 技术选型Q:How to use WebSockets with RxJS and Angular?...原创 2020-02-26 09:10:32 · 232 阅读 · 0 评论 -
Angular 使用扩展 【经常用到的一些库】
安装material步骤:ng new my-app (创建好后可在默认端口4200打开) npm install --save @angular/material @angular/cdk @angular/animations 在全局CSS里(styles.css)添加:@import "~@angular/material/prebuilt-themes/indigo-pink.cs...原创 2019-06-13 18:46:45 · 603 阅读 · 0 评论 -
angular 【子组件向父组件的父组件传值】 【 @Input() + set 约束属性的设置和获取】
@Input() + set// 子组件// ts clickTest() { console.log('i am child'); } _allowDays: any; @Input() set allowDays(val: string) { console.log('allowDays = ' + val); this._allow...原创 2019-08-22 19:53:59 · 1409 阅读 · 0 评论 -
canvas + angular
//Canvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。//每一次调用restore方法,上一个保存的状态就从栈中弹出,所有设定都恢复。//因此你应该用load事件来保证不会在加载完毕之前使用这个图片//@ViewChild("myCanvas",{static:true})设置为true,在mng-OnInt里,和其它的视图不...原创 2019-12-23 18:28:48 · 1380 阅读 · 0 评论 -
signalR with angular 【前后端双向通信】
参考:https://www.cnblogs.com/viter/p/10527566.htmlsignalR with angular: (第一个较为清晰)https://github.com/AARNOLD87/SignalRWithAngular/blob/master/Frontend/SignalR/src/app/services/signalr.service.ts...原创 2019-10-18 20:28:21 · 1321 阅读 · 0 评论 -
angular 一个component的3种状态 【拼接数据】【一个较为完整的demo】
需求:有一组图片,每张图片对应一个描述。然后这一组图片根据svg fill的不同又分成了2组。所以现在一共有3组图片,在3个文件夹里。现在想要在组件father-1和组件father-2种展示,在组件father-1中展示所有图片及其描述,在组件father-2中展示单个的图片及其描述。当点击组件father-1的图片按钮,按钮样式改变;点击组件father-2的图片按钮,按钮样式...原创 2020-01-20 16:39:05 · 340 阅读 · 0 评论 -
angular 读取json文件
步骤简介1. 把json文件放入 angular 项目目录的 assets 文件夹下(这样就可直接读取)2. 导入angular中的 HttpClientModule 来读取,这样就可在组件的代码中调用hrrpClient类的get()方法,把json转为observable读取以下是例子1. json 文件:{ "test_type": "command",...原创 2020-01-09 13:51:36 · 3439 阅读 · 1 评论 -
【angular获取dom】 【@ViewChild】 【ElementRef】 【Renderer2】【pipe】【subject】
这里的 square 是个变量不是字符串,要让它是字符串应该加上引号。[nzStrokeLinecap]="'square'"获取 dom 元素:* 可以通过 @ViewChil 获取【父子组件关系】的dom元素export class ProtocolComponent implements OnInit { @ViewChild(ProtocolMenuCompon...原创 2019-09-20 18:42:29 · 611 阅读 · 0 评论 -
【async pipe】【 promise】【Observable】【@Injectable】
private missionAnnounceSource = new Subject<string>();Subject是一个特殊的Observable,它允许将值多播给多个观察者.<div *ngIf="(user$ | async) as user; else loading"> <user-profile [user]="user.pr...原创 2019-09-19 18:40:22 · 219 阅读 · 0 评论 -
angular cdk & animations
cdk overlayanimations :可加伸缩效果 transform: 'translateY(100%) scale(0)'模板引用变量使用井号(#)来声明引用变量。模板引用变量通常用来引用模板中的某个DOM元素,它可以引用Angular组件或指令或 Web Component。我们可以在当前模板的任何地方使用模板引用变量。...原创 2019-08-09 13:09:52 · 219 阅读 · 0 评论 -
angular ts部分 *from stackoverflow* 【BrowserModule】【CommonModule】
1. Angular ngClass and click event for toggling class<div class="my_class" (click)="clickEvent()" [ngClass]="status ? 'success' : 'danger'"> Some content</div&...原创 2019-07-23 18:01:35 · 291 阅读 · 0 评论 -
Angular 使用笔记【依赖注入(有例子)】【constructor & ongOnInit】 【组件传值】【ngSwitch】
1. constructor用法:constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化和给属性赋值操作。当包含constructor的类被实例化时,构造函数将被调用。constructor也有其用武之地,其主要作用是注入依赖。在constructor中注入的依赖,就可以作为类的属性被使用了。construc...原创 2019-07-05 16:56:44 · 1106 阅读 · 0 评论 -
Angular 搭建购物车
概览学习文档:https://angular.cn/startapp目录 包含应用的组件和模块,我们要写的代码都在这个目录index.html 整个应用的根html,程序启动就是访问这个页面main.ts 整个项目的入口点,Angular通过这个文件来启动项目每个 Angular 应用都有一个根模块,通常命名为AppModule。根模块提供了用来启动应用的引导机制。 一个应用...原创 2019-06-11 15:57:18 · 999 阅读 · 1 评论