Matt的个人专栏

TypeScript对优化代码最有用的几个工具类型(Utility Type)

TypeScript提供了好几个工具类型,它们主要用于常见的类型转换。这里介绍让代码优化非常有用的几个工具类型:Partial,Required,Record,Pick,Omit和Exclude。PartialPartial顾名思义,取部分。它的作用是把已有类型里的所有属性变为可选。示例interface User{ id:number; name:string; atavarUrl:
阅读更多

在Angular Router中使用查询参数QueryParameter

会涉及到的api有:Angular Router ,RouterLink 和 ActivatedRoute。在Router.navigate中使用查询参数单参数如果使用 Router.navigate 路由,navigate提供了queryParams 用作查询参数传递。toProducts() { this.router.navigate( ['/products'], {
阅读更多

Angular指令ngIf用法详解

HTML是没有条件控制的语言,如果要根据某变量的值显示或隐藏某个DOM元素,往往需要结合JavaScript的if-else表达式来控制。Angular ngIf就可以增强Html这方面的能力。ngIf接受一个表达式作为值,并且强制把表达式计算出的值转换为Boolean类型,如果值为true,则在DOM中渲染模板,如果值为false则不渲染ngIf所在的模板。示例:<div class="c
阅读更多

Angular指令ngFor和ngForOf

NgForOf指令ngFor和ngForOf都是指令NgForOf的selector。定义如下:@Directive({selector: '[ngFor][ngForOf]'}) export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {
阅读更多

Angular Component组件的生命周期-ngDoCheck

在Angular Component组件的生命周期(一)知道,ngOnChanges只能用于检测Component组件绑定的@Input属性的赋值和重置,并不能检测组件发生的任何变化。其中一个例子是:let user:User = new User("张三"); user.name = “李四”;当父组件向子组件的@Input属性传递的是一个User对象,但父组件是通过user.name来修改对象
阅读更多

Angular Component组件的生命周期-ngOnChanges,ngOnInit

Angular Component组件的生命周期按时间次序可以分为以下阶段:组件的生命周期是从Angular 实例化组件开始接着渲染组件的视图以及子组件视图完成组件视图渲染后,Angular仍然会检测组件的变化,主要包括检测绑定属性的变化(change detect)根据检测到的变化,如果有必要,则更新组件和它的子组件Component组件生命周期结束最终是销毁组件,以及从DOM中移除组件的模板有
阅读更多

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo
阅读更多

Windows使用nvm-windows管理node.js多版本切换

nvm和n是两个在Mac/Linux上常用于管理node版本的工具,遗憾的是这两个工具都不支持Windows。在Windows可以用来管理Node版本的工具主要有:nvm-windows,nodist。本文主要介绍使用nvm-windows来管理node的版本。首先nvm-windows并非nvm的Windows版本,它是单独开发的用于在Windows管理Node版本的工具。nvm-window项
阅读更多

Angular使用keydown监听tab键事件处理

在html中,在焦点元素上按下tab键,它会跳到下一个可聚焦元素(按钮、输入等)。如果监听的是keyup,当按下tab放开时,焦点元素已经变为下一个可聚焦元素。在前面的焦点元素上做监听keyup是不会触发事件的处理handler的。为了避免焦点元素的变化这个问题,可以使用keydown监听tab键。Angular监听tab键示例示例:<input (keydown.Tab)="onKey($
阅读更多

Angular集成moment.js使用

moment.js是一个专门用于处理时间的包。可以通过下面的方法把moment.js集成到Angular中使用。一、使用npm安装moment.jsnpm install --save moment二、在使用moment.js的.ts文件中导入import * as moment from 'moment'; 三、使用moment.jsmyDate = moment(someDate).
阅读更多

CKEditor 5设置编辑器高度

CKEditor 5提供的几种编辑器,它们的高度是随着内容变化的,官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版(classic editor build),可以通过CSS:.ck-editor__editable_inline {  height: 200px;}对于所有版本,可以通过js来设置:editor.editing.view.chang
阅读更多

使用Node.js实现一个简单的web服务器

这是使用Node.js写的一个简单Web服务器示例,分为三部分:响应http请求路由url读取静态文件响应新建一个app.js文件作为此web服务器的入口。响应http请求首先我们引入http模块,创建一个http服务器。const http = require('http'); const hostname = '127.0.0.1'
阅读更多

浏览器页面间通信新接口BroadcastChannel的用法

Broadcast Channel API允许同源(同一站点)的浏览器上下文(包括窗口,标签,框架或iframe)之间的简单通信。 通信的方式如图:用法构建channelvar bc = new BroadcastChannel('test_channel');test_channel参数用来指定channel的名称,连接到相同名称的BroadcastChannel,可以监听到这个cha
阅读更多

Angluar 11集成CkEditor 5

CkEditor 5提供了5种即用型的编辑器,分别是Classic editorInline editorBalloon editorBalloon block editorDocument editor版本说明CkeEditor 5也提供可Angular的Component,npm包是ckeditor5-angular,分为两个主版本:版本 1.x.x :适用于 Angular 5-8。Angu
阅读更多

WebStorm设置Node.js代码提示补全

配置Node.js安装路径首先需要安装Node.js。安装完Node.js后,WebStorm会自动识别并配置Node.js的安装路径。WebStorm设置Node.js安装路径如下:File -> Setting -> Language & Frameworks -> Node.js&nbs
阅读更多

Node.js端口冲突:Error: listen EADDRINUSE :::8080

这个错误主要是8080端口已被使用。解决方法是换个端口或者杀掉占用的8080端口的进程。查找占用端口的进程lsof -i tcp:8080返回类似的结果:COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEnode 41381 You 11u IPv6 0xac745b2749fd2be3 0
阅读更多

使用localStorage实现浏览器页面之间的通信(更新别的页面)

需求场景我们打开了两个需要登录的页面。我们在其中一个页面登录成功了,现在是想能够把已登陆的状态通知另外一个页面,让它自动更新。实现方案我们可以使用html5的localStorage来实现同一个浏览器页面之间的通信。信息广播:function messageBroadcast(message){ localStorage.setItem('message',JSON.stringify(me
阅读更多

CSS让绝对定位的元素居中的办法

水平居中,设置left:0,right:0, 垂直居中,设置top:0,bottom:0。margin设置为auto<!DOCTYPE html> <html lang="en"> <head> <title>SO question 2803532</title> <style type="text/css
阅读更多
X

欢迎加群学习交流

联系我们