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:

Blog post

https://github.com/angular/angular.io/issues/1150

[Angular] Getting to Know the @Attribute Decorator in Angular的更多相关文章

  1. [Angular] Angular Attribute Decorator - When to use it?

    When we pass value to a component, normally we use @Input. <my-comp [courses]="(courses$ | a ...

  2. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  3. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  4. 【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

    自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来.希望对大家都有帮助. 这是今天解决的一个问题,Angular ...

  5. 【Angular专题】 (3)装饰器decorator,一块语法糖

    目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...

  6. [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 ...

  7. Angular开发实践(三):剖析Angular Component

    Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准. ...

  8. [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库

    使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...

  9. [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 ...

随机推荐

  1. EOJ 1114 素数环

    题意 一个由自然数 1…n (n≤18) 素数环就是如下图所示,环上任意两个节点上数值之和为素数. 1 / \   4  2 \ /    3 Input 输入只有一个数 n,表示你需要建立一个 1… ...

  2. 百度jquery公共引用地址

    http://cdn.code.baidu.com/ http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js http://apps.bdimg.com/l ...

  3. 转载【H:JL】用大家的力量来总结一个目录(众人拾柴火焰高)

    博客地址:http://www.cnblogs.com/HJL-Blog/p/4459245.html

  4. shp系列(三)——利用C++进行DBF文件的读(打开)

    1.DBF文件要点 DBF文件又叫属性文件,也叫dBASE文件,文件后缀是.dbf,实际上ArcGIS打开后的属性表就是DBF的信息.DBF文件遵循以下几个条件: 每个要素在表中必须要包含一个与之相对 ...

  5. RT-Thread 设备驱动SPI浅析及使用

    OS版本:RT-Thread 4.0.0 测试BSP:STM32F407 SPI简介 SPI总线框架其实和I2C差不多,可以说都是总线设备+从设备,但SPI设备的通信时序配置并不固定,也就是说控制特定 ...

  6. 多线程之HttpClient

    在程序用调用 Http 接口.请求 http 资源.编写 http 爬虫等的时候都需要在程序集中进行 Http 请求. 很多人习惯的 WebClient.HttpWebRequest 在 TPL 下很 ...

  7. hdu1811 Rank of Tetris 拓扑排序+并查集

    这道题是拓扑排序和并查集的综合运用. 由于排行榜是一种从高到低的排序.所以在拓扑排序的时候,如果有一次加入的入度为零的点数大于1,就有变得不确定了(UNCERTAIN). 由于只有一棵树,当树的数量大 ...

  8. wp7图片上传服务器

    做一个wp7手机上传图片到服务器的功能,具体丝路是在手机端做一个照相或者选择图片的功能,点击上传,在服务器端做一个一般处理程序,接受上传的文件,存入文件夹,下面是主要代码: 手机端代码: /// &l ...

  9. springmvc中freemarker的搭建

    在springmvc框架已经搭好的前提下,导入freemarker.jar,此处版本是2.3. 主要的配置工作都在spring-servlet.xml中,请看代码: <!--配置试图解析器 -- ...

  10. MySQL笔记5-----索引(覆盖索引等)

    1.概念: 覆盖索引:(个人理解)就是包含所有查询记录的索引.当查询量过大时可以采用覆盖索引来进行查询,效率较高. 回表:建立覆盖索引就是避免回表,回表效率会很慢. select查询的字段只有索引列, ...