[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 ...
随机推荐
- java中与运算,或运算,异或运算,取反运算
//与运算 & 规则 :都为1时才为1 System.out.println( 7 & 9); /* * 7二进制 0111 ...
- Windows Server 2012 / 2016 安装 .Net Framework 3.5(PowerShell)
原文链接:https://www.muhanxue.com/essays/2017/04/3736598.html 问题描述 使用 Windows Server 2012 R2 或 Windows S ...
- 仿QQ浏览器mac版官网主页 html+css3特效
这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载
- (转载) android studio library生成jar包和aar的方法总结
android studio library生成jar包和aar的方法总结 标签: android学习文档jar和aar的使用与生成gradle 2016-11-25 10:39 1782人阅读 评论 ...
- hdu2686/hdu3376 最小费用流最大流 拆点
虽然题目求的是最大费用,但是我们可以通过转换就变为最小费用.用一个比最大值更的数与每个数的差作为费用值.最后处理回来就i可以了.有些人用直接每个值都乘以-1,这样更简单. 做这题,我对为什么不拆点就会 ...
- 高级I/O函数
给套接口上的I/O设置超时 1.调用alarm,在调用超过指定时间时产生SIGALARM信号,这涉及到信号处理,而且可能和进程中其他的alarm冲突 2.使用select阻塞在等待I/O上,selec ...
- C++目录遍历:使用第三方库boost.filesystem等
1. opencv 目录文件遍历 注释:2014 0814 这个代码是基于java的,Java使用托管代码进行目录管理,C++就不那么跨平台了. 原文链接:http://blog.csdn.net/z ...
- LoadRunner时间戳函数web_save_timestamp_param
举例:1520822348346(13位,毫秒级) 做时间戳的目的是为了JS缓存和防止CSRF,在LR中可以简单的使用下面这个函数 web_save_timestamp_param 来生成时间戳 ...
- 构造定律(constructal law)-构造定律作为第二个时间箭头,将和热力学第二定律一道将宇宙推向无序。
优化系统结构,使信息和物质流在结构内的流动更畅通. 构造定律(constructal law) 由Adrian Bejan于1995创立的构造定律(constructal law): For a ...
- SpringMVC(一) HelloWorld
学习新东西的的第一个程序--HelloWorld,以下是SpringMVC的HelloWorld 第一步: 用MAVEN 创建webapp,并添加依赖.(强烈建议使用MAVEN,MAVEN学习书籍和视 ...