Angular 依赖性注入 changeDetection 可拖拽的属性型指令
2018-03-03 07:23
316 查看
4.1 依赖性注入
令牌 构建 依赖
Injector Provider Object 难。。
4.2 changeDetection
检查变化的策略:默认:全局检查,
改为onpush策略,减少全局检查的频率,大应用可以以此提高性能
(changeDetection:ChangeDetectionStrategy.OnPush)
然后在constructor中申明ChangeDetectorRef,再调用它的markDetector方法
4.3 指令
指令:组件是一种带模板的指令
指令分为结构型(Structural)指令和属性型(Attribute)指令
Renderer2 和 ElementRef
Angular不提倡直接操作DOM,这是一个危险的行为
对于DOM的操作应该通过Renderer2来进行,ElementRef可以理解为指向DOM元素的引用
令牌 构建 依赖
Injector Provider Object 难。。
4.2 changeDetection
检查变化的策略:默认:全局检查,
改为onpush策略,减少全局检查的频率,大应用可以以此提高性能
(changeDetection:ChangeDetectionStrategy.OnPush)
然后在constructor中申明ChangeDetectorRef,再调用它的markDetector方法
constructor(...,private cd:ChangeDetectorRef ) xx(){ ... this.cd,markForCheck(); }
4.3 指令
指令:组件是一种带模板的指令
指令分为结构型(Structural)指令和属性型(Attribute)指令
Renderer2 和 ElementRef
Angular不提倡直接操作DOM,这是一个危险的行为
对于DOM的操作应该通过Renderer2来进行,ElementRef可以理解为指向DOM元素的引用
drag-drop 拖拽 Can't bind to 'app-draggable' since it isn't a known property of 'mat-list-item'. 1. If 'mat-list-item' is an Angular component and it has 'app-draggable' input, then verify that it is part of this module. 2. If 'mat-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" 'priority-emergency':item.priority===1 }" [ERROR ->][app-draggable]="true" [draggedClass]="drag-start" (click)="onItemClick()" "): ng:///TaskModule/TaskItemComponent.html@7:2 --->莫名其妙 多保存几次就好了 [app-draggable]="true" [draggedClass]="'drag-start'" 不加''会认为是成员变量,找不到就是undefined
相关文章推荐
- 拖拽(可以封装成指令的形式 angular )
- Angular2 之 属性型指令
- Angular 属性型指令 directive
- Angular 指令(Directive)属性型指令
- Angular 内置属性型指令
- Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
- Angular 依赖性注入
- Angular2封装拖拽指令
- angular 创建一个简单的属性型指令 (动态获取DOM元素size,对DOM样式进行改变)
- angular-drag - 基于Angularjs的拖拽指令
- angular可自定义的对话框,弹窗指令
- angular 常用指令和方法
- Angular 4依赖注入学习教程之ValueProvider的使用(七)
- angular指令心得(ng-model)
- angular 指令——时钟范例
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- Angular2组件与指令的小实践——实现一个图片轮播组件
- (七)理解angular中的module和injector,即依赖注入
- angular指令中link函数 参数实例详解
- ANGULAR 开发用户选择器指令