blog-angular

blog-angular copied to clipboard

## No value accessor for form control with name xxx angular拓展表单控件时，写了个自定义控件 ``` ``` 这个组件里面已经实现了接口但是还报这个错误，可能是因为少写了`providers`： ``` @Component({ providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], }) ```

deepthan

#### 1.main.ts里面修改 ``` const platform = platformBrowserDynamic(); platform.bootstrapModule(App); ``` 改成 ``` platformBrowserDynamic().bootstrapModule(AppModule); ``` #### 如果上面没用 在`app.module`中删除一个东西再加上即可解决问题。

deepthan

#### 1. 下载`systemjs` ``` yarn add "@types/systemjs": "^0.20.6", ``` 或者 ``` npm install @types/systemjs --save-dev ``` #### 2. 配置`tsconfig` tsconfig.json ``` { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true,...

deepthan

Angular npm 包 ng-packagr打包遇到的坑

1

#### 1. es6语法不支持`map`、`startsWith`等报错 这是因为在配置文件中默认配置的是`es5`，所以需要更为`es6`+，在最外层`tsconfig.json`中将`target`更改为`es6`，自己模块内的`tsconfig.lib.json`中的`target`也需要更改为`es6`。 > tsconfig.json ``` { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "es2015", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5",...

deepthan

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.7. Commits c74c8af 1.3.7 024b8b5 update deps, add linting 032fbaf Use Object.create(null) to avoid default object property hazards 2da9039 1.3.6 cfea636 better git push script,...

dependabot[bot]

Bumps [is-my-json-valid](https://github.com/mafintosh/is-my-json-valid) from 2.16.1 to 2.20.5. Commits 441f812 2.20.5 d36a1b1 Merge pull request #182 from ChALkeR/chalker/fix-comma b6ea484 Fix uri prefix detection 5389c5b Merge pull request #181 from ChALkeR/chalker/fix-undef df5b313 add...

dependabot[bot]

## ConnectionPositionPair 两个连接的位置 源元素（A）和覆盖元素（B： 漂浮起来的元素）连接的点的位置 ### 属性 名称 | 描述 ---|--- offsetX: number | x轴偏移量 offsetY: number | y轴偏移量 originX: HorizontalConnectionPos | 点在源元素X轴什么位置， 可选'start', 'end', 或者 'center' originY: HorizontalConnectionPos |...

deepthan

# 手动实现虚拟滚动列表 ### 什么是虚拟滚动列表？ 根据滚动容器元素的可视区域来渲染长列表数据中某一部分数据的技术。 即： 仅渲染可视区域渲染的列表。 - **滚动容器元素**：一般情况下，滚动元素是`window`对象，然而，我们可以通过布局的方式，在某个页面中任意指定一个或多个滚动容器元素。 - **可滚动区域**：滚动容器的内部内容区域。若有10条数据，每个列表项的高度是50， 那么可滚动区域的高度就是 10*50, 可滚动区域当前的具体高度值一般可以通过滚动容器的`scrollHeight`属性获取，用户可以通过滚动来改变列表在可视区域的显示部分。 - **可视区域**：滚动容器的视觉可见区域。如果滚动元素是window对象，可视区域就是浏览器的视口大小；如果容器元素是某个div元素，其高度是300，右侧有纵向滚动条可以滚动，那么视觉可见区域就是可视区域。 ### 为什么用它？ 虚拟列表是对长列表的一种优化方案。 长列表: - 概念： 在前端开发中，会碰到一些不能使用分页方式来加载列表数据的业务形态，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会准实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 - 优劣： 可以一次性把所有数据实时展现出来，但是渲染时间较长，数据量大会导致页面卡顿。 非完整的长列表渲染一般有两种方式 - 按需渲染，如虚拟列表 -...

deepthan

# Angular cdk 虚拟滚动例子 - [英文官方文档](https://material.angular.io/cdk/scrolling/overview) - [中文官方文档](https://material.angular.cn/) - [源码](https://github.com/angular/components/tree/master/src/cdk/scrolling) > module ``` import { ScrollDispatchModule } from '@angular/cdk/scrolling'; @NgModule({ imports: [ ScrollDispatchModule, ], }) ``` > component.ts ``` import...

deepthan

## Angular cdk 如何做一个绝对定位 ### 1. module中注入overaly模块 ``` import { PortalModule } from "@angular/cdk/portal"; import { OverlayModule } from "@angular/cdk/overlay"; @NgModule({ imports: [ OverlayModule, PortalModule], }) ``` ### 2. 组件html...

deepthan