如何使用Angular的@Input()装饰器

简介: 如何使用Angular的@Input()装饰器

(1) 引入@Input():

import { Input } from ‘@angular/core’; image.png

(2) 在需要使用@Input的Component内,声明一个product属性(property):

@Input() product;image.png

现在我们可以在该Component的模板内,使用product属性名进行访问了:

image.png

<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>


(3) 在需要使用该Component的parent模板里,使用Component的selector 插入包含了@Input的Component:

image.png

相当于把父组件的数据通过中括号传递给了子组件。

最后的效果:

image.png

相关文章
|
1月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
1月前
|
JavaScript
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
|
8月前
|
JavaScript
关于 Angular 的 HostBinding 装饰器
关于 Angular 的 HostBinding 装饰器
|
9月前
|
JavaScript
Angular @HostListener 装饰器的使用笔记
Angular @HostListener 装饰器的使用笔记
|
JavaScript API
Angular input decorator学习笔记
https://angular.io/api/core/Input Input decorator只能用在Angular class字段里, 用于指定元数据,将class字段指定成input property.
Angular input decorator学习笔记
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
108 0
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
|
JavaScript 容器
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
193 0
Angular应用input和div标签页的动态创建场景
|
Web App开发 开发者
Angular应用里input字段后面的_ngcontent-hqi是什么含义
Angular应用里input字段后面的_ngcontent-hqi是什么含义
Angular应用里input字段后面的_ngcontent-hqi是什么含义
|
JavaScript 前端开发
Angular input控件的click事件表达式如何被转换成JavaScript函数
Angular input控件的click事件表达式如何被转换成JavaScript函数
125 0
Angular input控件的click事件表达式如何被转换成JavaScript函数
Angular input控件的click事件响应处理的调用上下文
Angular input控件的click事件响应处理的调用上下文
125 0
Angular input控件的click事件响应处理的调用上下文