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. java中与运算,或运算,异或运算,取反运算

      //与运算 &  规则 :都为1时才为1        System.out.println( 7 & 9);        /*         *  7二进制 0111     ...

  2. Windows Server 2012 / 2016 安装 .Net Framework 3.5(PowerShell)

    原文链接:https://www.muhanxue.com/essays/2017/04/3736598.html 问题描述 使用 Windows Server 2012 R2 或 Windows S ...

  3. 仿QQ浏览器mac版官网主页 html+css3特效

    这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载

  4. (转载) android studio library生成jar包和aar的方法总结

    android studio library生成jar包和aar的方法总结 标签: android学习文档jar和aar的使用与生成gradle 2016-11-25 10:39 1782人阅读 评论 ...

  5. hdu2686/hdu3376 最小费用流最大流 拆点

    虽然题目求的是最大费用,但是我们可以通过转换就变为最小费用.用一个比最大值更的数与每个数的差作为费用值.最后处理回来就i可以了.有些人用直接每个值都乘以-1,这样更简单. 做这题,我对为什么不拆点就会 ...

  6. 高级I/O函数

    给套接口上的I/O设置超时 1.调用alarm,在调用超过指定时间时产生SIGALARM信号,这涉及到信号处理,而且可能和进程中其他的alarm冲突 2.使用select阻塞在等待I/O上,selec ...

  7. C++目录遍历:使用第三方库boost.filesystem等

    1. opencv 目录文件遍历 注释:2014 0814 这个代码是基于java的,Java使用托管代码进行目录管理,C++就不那么跨平台了. 原文链接:http://blog.csdn.net/z ...

  8. LoadRunner时间戳函数web_save_timestamp_param

    举例:1520822348346(13位,毫秒级)   做时间戳的目的是为了JS缓存和防止CSRF,在LR中可以简单的使用下面这个函数 web_save_timestamp_param 来生成时间戳 ...

  9. 构造定律(constructal law)-构造定律作为第二个时间箭头,将和热力学第二定律一道将宇宙推向无序。

    优化系统结构,使信息和物质流在结构内的流动更畅通. 构造定律(constructal law) 由Adrian Bejan于1995创立的构造定律(constructal law):   For a ...

  10. SpringMVC(一) HelloWorld

    学习新东西的的第一个程序--HelloWorld,以下是SpringMVC的HelloWorld 第一步: 用MAVEN 创建webapp,并添加依赖.(强烈建议使用MAVEN,MAVEN学习书籍和视 ...