Angular input decorator学习笔记

简介: https://angular.io/api/core/InputInput decorator只能用在Angular class字段里, 用于指定元数据,将class字段指定成input property.

Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property’s value.


参数名称:The name of the DOM property to which the input property is bound.


看个例子:


image.png

@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
    Account Id: {{id}}
  `
})
class BankAccount {
  // This property is bound using its original name.
  @Input() bankName: string;
  // this property value is bound to a different property name
  // when this component is instantiated in a template.
  @Input('account-id') id: string;
  // this property is not bound, and is not automatically updated by Angular
  normalizedBankName: string;
}
@Component({
  selector: 'app',
  template: `
    <bank-account bankName="RBC" account-id="4747"></bank-account>
  `
})
class App {}

子组件的模板里,显示bankName和id两个模型字段。

这两个字段,加上了@Input装饰器,表明其数据源,需要外部消费者传入(通常是消费这个子组件的父组件

image.png

image.png

image.png

image.png

image.png



相关文章
|
5月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
28天前
|
JavaScript
angular之Input和Output
angular之Input和Output
|
5月前
|
JavaScript
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
|
前端开发 JavaScript API
Angular Change Detection 的学习笔记
Angular Change Detection 的学习笔记
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
131 0
Angular Universal 学习笔记
|
JavaScript
Angular Form (响应式Form) 学习笔记
Angular Form (响应式Form) 学习笔记
184 0
Angular Form (响应式Form) 学习笔记
|
JSON API 数据格式
Angular CLI builder 学习笔记
Angular CLI builder 学习笔记
122 0
Angular CLI builder 学习笔记
|
JavaScript 测试技术 API
Angular library 学习笔记
Angular library 学习笔记
205 0
Angular library 学习笔记
|
设计模式 JavaScript 前端开发
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
344 0
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
下一篇
无影云桌面