[Angular] Getting to Know the @Attribute Decorator in Angular
2024-08-30 23:11:23
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
最新文章
- C#中的null与void
- 使用本地JConsole监控远程JVM(最权威的总结)
- Uvaoj 10048 - Audiophobia（Floyd算法变形）
- css-画三角箭头
- Markdown资源 markd
- 安装mmseg出错 config.status: error: cannot find input file: src/Makefile.in
- IOS开发-cell的动态高度
- netty常用代码
- Intellij IDEA13 创建多模块Maven项目
- spark 启动时候报 Unable to load native-hadoop library for your platform 警告
- [LeetCode] 148. Sort List 解题思路
- 在web应用程序中使用MemcachedClient
- 数学之路-python计算实战(13)-机器视觉-图像增强
- 转：LoadRunner获取毫秒及字符串替换实现
- unity下跨平台excel读写
- 简陋的斗地主，js实现
- shell参数传递
- Armstrong公理
- 简单Java动态代理实现
- echart 圆滑初始化化