[Angular] Getting to Know the @Attribute Decorator in Angular
So when you using input binding in Angular, it will always check for update.
If you want to improve youre preformence a little bit, you can use @Attribute decorator comes with Angular latest v6.
From code:
export type ButtonType = 'primary' | 'secondary'; @Component({
selector: 'app-button',
template: `
<button [ngClass]="type">
<ng-content></ng-content>
</button>
`
})
export class ButtonComponent {
@Input() type: ButtonType = 'primary';
} // use
<app-button type="secondary" (click)="click()">Click</app-button>
To code:
import { Component, Attribute } from '@angular/core'; export type ButtonType = 'primary' | 'secondary'; @Component({
selector: 'app-button',
template: `
<button [ngClass]="type">
<ng-content></ng-content>
</button>
`
})
export class ButtonComponent { constructor(@Attribute('type') public type: ButtonType = 'primary') { } }
With this change, Angular will evaluate it once and forget about it.
More information to follow:
https://github.com/angular/angular.io/issues/1150
[Angular] Getting to Know the @Attribute Decorator in Angular的更多相关文章
- [Angular] Angular Attribute Decorator - When to use it?
When we pass value to a component, normally we use @Input. <my-comp [courses]="(courses$ | a ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- 【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once
自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来.希望对大家都有帮助. 这是今天解决的一个问题,Angular ...
- 【Angular专题】 (3)装饰器decorator,一块语法糖
目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...
- [Angular 2] Using ngrx/store and Reducers for Angular 2 Application State
ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an eas ...
- Angular开发实践(三):剖析Angular Component
Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准. ...
- [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库
使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...
- [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern
Extracting away the implementation details of ngrx from your components using the facade pattern cre ...
随机推荐
- EOJ 1114 素数环
题意 一个由自然数 1…n (n≤18) 素数环就是如下图所示,环上任意两个节点上数值之和为素数. 1 / \ 4 2 \ / 3 Input 输入只有一个数 n,表示你需要建立一个 1… ...
- 百度jquery公共引用地址
http://cdn.code.baidu.com/ http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js http://apps.bdimg.com/l ...
- 转载【H:JL】用大家的力量来总结一个目录(众人拾柴火焰高)
博客地址:http://www.cnblogs.com/HJL-Blog/p/4459245.html
- shp系列(三)——利用C++进行DBF文件的读(打开)
1.DBF文件要点 DBF文件又叫属性文件,也叫dBASE文件,文件后缀是.dbf,实际上ArcGIS打开后的属性表就是DBF的信息.DBF文件遵循以下几个条件: 每个要素在表中必须要包含一个与之相对 ...
- RT-Thread 设备驱动SPI浅析及使用
OS版本:RT-Thread 4.0.0 测试BSP:STM32F407 SPI简介 SPI总线框架其实和I2C差不多,可以说都是总线设备+从设备,但SPI设备的通信时序配置并不固定,也就是说控制特定 ...
- 多线程之HttpClient
在程序用调用 Http 接口.请求 http 资源.编写 http 爬虫等的时候都需要在程序集中进行 Http 请求. 很多人习惯的 WebClient.HttpWebRequest 在 TPL 下很 ...
- hdu1811 Rank of Tetris 拓扑排序+并查集
这道题是拓扑排序和并查集的综合运用. 由于排行榜是一种从高到低的排序.所以在拓扑排序的时候,如果有一次加入的入度为零的点数大于1,就有变得不确定了(UNCERTAIN). 由于只有一棵树,当树的数量大 ...
- wp7图片上传服务器
做一个wp7手机上传图片到服务器的功能,具体丝路是在手机端做一个照相或者选择图片的功能,点击上传,在服务器端做一个一般处理程序,接受上传的文件,存入文件夹,下面是主要代码: 手机端代码: /// &l ...
- springmvc中freemarker的搭建
在springmvc框架已经搭好的前提下,导入freemarker.jar,此处版本是2.3. 主要的配置工作都在spring-servlet.xml中,请看代码: <!--配置试图解析器 -- ...
- MySQL笔记5-----索引(覆盖索引等)
1.概念: 覆盖索引:(个人理解)就是包含所有查询记录的索引.当查询量过大时可以采用覆盖索引来进行查询,效率较高. 回表:建立覆盖索引就是避免回表,回表效率会很慢. select查询的字段只有索引列, ...