blog-angular

blog-angular copied to clipboard

#### 问题 拖拽的时候会触发点击事件，所以得分清是拖拽还是点击 #### 原理介绍 - 点击一般使用`click`,但是我们这里需要用`mouseDown`和`mouseUp`来实现 - 拖动过程中会触发三个事件 - `mouseDown`、`mouseMove`、`mouseUp` 所以我们在`mouseDown`事件中记录鼠标的位置，在`mouseUp` 时比较此时的位置是否相同则可判断是点击还是拖拽。 html ``` ``` ts ``` dowmPosi = []; upPosi = [] onMousedown(event: MouseEvent){ const { pageX, pageY...

deepthan

#### KeyValueChanges 方法 html ``` 1233 ``` ts ``` import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core'; export class Customer { firstName: string; favoriteColor: string; } export class xx {...

deepthan

# js添加事件监听 #### 1. HostListener监听点击事件 ``` import { HostListener } from "@angular/core"; export class xxx { @HostListener('window:click', ['$event.target']) onClick(targetElement: string) { console.log(`You clicked on`, targetElement); } } ``` - `click`表示我们要处理这个`a`的点击事件，...

deepthan

# html事件写法 angular中事件的写法格式是 ``` ``` #### 1. 点击事件写法及说明 ``` 点击事件 ``` - `click`表示我们要处理这个`a`的点击事件， - `()` 圆括号是说发生此事件时，调用等号后面的表达式或函数。 - 等号后面的 `onClick()` 是我们定义在组件中的函数名字。 #### 2. 右键点击自定义菜单 在html元素中绑定右击事件 ``` 我是一个节点 ``` 在js中定义事件处理方法，其中`event.preventDefault()`可以阻止默认右键菜单的出现。 ``` onRightClick(event)...

deepthan

Bumps [http-proxy](https://github.com/http-party/node-http-proxy) from 1.16.2 to 1.18.1. Release notes Sourced from http-proxy's releases. Long overdue maintenance Due to some great contributions I'm happy to announce a new release of http-proxy containing...

dependabot[bot]

Bumps [lodash.mergewith](https://github.com/lodash/lodash) from 4.6.0 to 4.6.2. Commits See full diff in compare view [](https://docs.github.com/en/github/managing-security-vulnerabilities/configuring-github-dependabot-security-updates) Dependabot will resolve any conflicts with this PR as long as you don't alter...

dependabot[bot]

#### 引用dom节点 -- #refName ``` ``` 我们在`input`标签里面加了一个`#user`，这个叫做引用。 它引用的是`input`对象，那么我们用`#user.value`则获取到了`input`里面的值。

deepthan

# 如何让字符串的dom元素渲染到页面上 让字符串的dom元素渲染到页面上而不是以字符串的形式显示出来。 假设有这样一个字符串： ``` domStr = "我是一只开心的div" ``` #### 1. 自定义一个管道 ``` /** * dom元素渲染管道 */ import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer, SafeHtml, SafeStyle, SafeScript,...

deepthan

# 如何自定义管道 ## 1. 先写一个简单的管道 新建一个获得顺序的管道，传入1显示`第一个`字段，传入2显示`第二个`字段 ``` import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'getOrder' }) export class ColorLumpPipe implements PipeTransform { transform(value: number): any { switch(value){ case...

deepthan

# 如何写一个日期转换管道 > 管道作用： 把 1509601513000 格式的时间转换为 2017-10-31 格式 - share文件夹里面有个 date-transform.pipe.ts ``` import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name:'dateTransformPipe'}) export class DateTransformPipe implements PipeTransform { transform(val) { let...

deepthan