[Angular] Getting to Know the @Attribute Decorator in Angular
Angular to in The attribute Getting Decorator Know
2023-09-14 08:59:17 时间
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:
相关文章
- [Angular] How to get Store state in ngrx Effect
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
- [ngx-formly] Use Angular Formly Extensions to automatically localize all field labels
- [Angular] Introduction to Angular Internationalization (i18n)
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular] Using directive to create a simple Credit card validator
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] Generate Angular 2 Components Programmatically with entryComponents & ViewContainerRef
- [Angular 2] Passing data to components with @Input
- Angular移除不必要的$watch之性能优化
- association in CDS view is converted to LEFT OUTER MANY TO ONE JOIN in the runtime
- 关于 Angular 12 的 inlineCriticalCss 选项
- Angular应用里使用rxjs提供的观察者和发布者实现事件处理
- 修改 Angular Component 构造函数参数被认为是 breaking change
- Angular jasmine单元测试框架TestBed.createComponent的实现原理
- 如何使用Angular rxjs进行优雅限流
- Angular路由跳转时,如何传递信息
- 成功解决To fix this you could try to: 1. loosen the range of package versions you‘ve specified
- Sqlachemy的警告SAWarning: The IN-predicate on "sns_object.BIZ_ID" was invoked with an empty sequence. This results in a contradiction, which nonetheless can be expensive to evaluate.
- AngularJS 1.x 国际化——Angular-translate例子