(一)@Input属性讨论

2023-10-31

@Input

Declares a data-bound input property.Angular automatically updates data-bound properties during change detection.

大概意思就是:@Input属性声明了一个数据绑定的输入属性,当angular检测到改变时可以自动更新。

在Angular2官方文档里有一段示例代码(https://angular.cn/docs/ts/latest/guide/ngmodule.html)

@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
    Account Id: {{id}}
  `
})
class BankAccount {
  @Input() bankName: string;
  @Input('account-id') id: string;
  // this property is not bound, and won't be automatically updated by Angular
  normalizedBankName: string;
}
@Component({
  selector: 'app',
  template: `
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
  `,
  directives: [BankAccount]
})
class App {}
bootstrap(App);
在网页上显示的内容:

Bank Name: RBC

Account Id: 4747

为BankAccount类声明了两个输入属性,并在<bank-account>标签中为其赋值。

在这里还要注意两点:

1)单向属性绑定

<bank-account bank-name="RBC" account-id="4747"></bank-account>
其中bank-name是视图目标,“RBC”是数据源,数据的流向是从数据源到视图目标。

如果输入属性不是字符串而是一个类,则注意要为视图目标加上[],比如:

<bank-account [bankUser]="user"></bank-account>
2)@Input声明变量的两种形式

@Input() bankName: string;
@Input('bank-name'): string;
以上两种声明等效。


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

(一)@Input属性讨论 的相关文章

  • 统计学习方法——概述

    统计学习方法之概述 1 统计学习的特点 1 统计学习以计算机及网络为平台 是建立在计算机及网络上的 2 统计学习以数据为研究对象 是数据驱动的学科 3 统计学习的目的是对数据进行预测与分析 4 统计学习以方法为中心 统计学习方法构建模型井应
  • windows10企业版开启RDP多用户同时登录

    1 系统属性 开启远程桌面 添加远程桌面登录用户 2 快捷键win R 输入 gpedit msc 打开本地组策略编辑器 选择 管理模板 gt Windows组件 gt 远程桌面服务 gt 远程桌面会话主机 gt 连接 配置 限制连接的数量
  • 夯实网络安全基石,筑牢网络安全防线

    没有网络安全就没有国家安全 这句话我们常常能在各种新闻里看见 安全是发展的前提 发展是安全的保障 共同推进安全和发展 Z强调 要坚持依法治网 依法办网 依法上网 今年的国家网络安全宣传周在9月11日至17日全国范围内开展 今年的网安周以 网
  • 电脑重装系统后需要更新哪些驱动

    在电脑重装系统后 由于系统的重置 您需要重新安装和更新一些关键的驱动程序 以确保硬件设备正常工作和性能最佳化 以下是在电脑重装系统后需要更新的一些常见驱动程序 工具 原料 系统版本 win10系统 品牌型号 戴尔 XPS13 9350 37
  • H5新增标签 css图标库 web 前端 字体 问题

    目录 css图标库 web前端字体 CSS Hint H5新增标签 1
  • OpenCV学习(2)——图像的数据格式BGR

    OpenCV学习 2 图像的BGR格式解读 1 opencv读取的图片数据格式 2 BGR含义 1 opencv读取的图片数据格式 opencv读取的图片数据格式为numpy的nparray格式 一张二维图片是由像素点构成 如下图所示 其中
  • Mysql:增删改查基础语句

    mysql基础入门语句 增 INSERT INTO 表名 字段1 2 3 VALUES 值1 2 3 删 DELETE FROM 表明 WHERE 删除条件 不提供更新条件 则删除所有 改 UPDATE 表名 SET 字段1 新值 字段2
  • JavaScript学习 -- ajax方法的POST请求

    在Web开发中 通过POST请求将数据发送给服务器是一种常见的方式 使用jQuery可以轻松地发送POST请求 这需要使用jQuery的ajax 方法 本文将介绍jQuery如何使用POST请求发送数据 并提供一个实际的例子 使用 ajax
  • rcp命令

    http www cnblogs com peida archive 2013 03 14 2958685 html rcp代表 remote file copy 远程文件拷贝 该命令用于在计算机之间拷贝文件 rcp命令有两种格式 第一种格
  • Py_Finalize引发的异常

    Py Finalize引发如下异常 0x00007FFFE5A28D10 python38 dll 处 位于 MTFform exe 中 引发的异常 0xC0000005 执行位置 0x00007FFFE5A28D10 时发生访问冲突 解决
  • 项目系列之登录管理

    登录管理是现代计算机系统中关键的组成部分之一 那么本篇博客我们来简单了解一下登录的流程与前后端干了啥事 一 登录流程 用户打开登录页面 用户访问应用程序或网站的登录页面 此页面通常包含用户名 邮箱输入字段和密码输入字段 以及登录按钮 用户输
  • 2、模板方法

    文章目录 概念 demo 概念 父类定义抽象 的 template method 并由别的方法调用 子类实现具体的 template method 和观察者类似 回调函数 钩子函数 都是此模式的应用 观察者一般是多个 方法由被观察者调用 模
  • redhat6.4 下安装oracle 11g详细完整的步骤

    一 虚拟机安装操作系统 Redhat 6 4 注意 linux下安装oracle 11 如果是redhat系统 选择redhat6版本的 因为redhat7版本里面少一个安装数据库用到的包compat libstdc 33 没有这个包 安装
  • flutter自定义广告Banner

    Flutter 1 0 is out Tuesday December 4 2018 Banner是手机应用最常见的需求之一 https pub dartlang org flutter中搜索Banner找到两个开源库 引入项目后 分别存在
  • 项目应用:使用自定义注解完成对controller的aop控制

    在项目进行过程中 需要使用aop对api传入或者传出数据进行日志记录 考虑实际应用 放弃了使用拦截器 转而使用aop的前置通知和返回通知中加入日志记录操作 在spring中 controller会被JDK自动代理 当使用自定义标签时cont
  • R语言的基本数据类型:数值,字符串,逻辑

    R语言的基本数据类型 数值 双整型 储存普通数值型数据 可正可负 可大可小 可含小数可不含 R中输入的任何一个数值都默认以双整型存储 可以使用typeof 函数来查看对象类型 在数据科学里 它更常被称为数值型 整型 只能用来储存正数 在R中
  • 前端面试题之——兼容篇

    兼容性面试题 一 html 部分 1 H5 新标签在 IE9 以下的浏览器识别 html5shiv js 下载地址 2 ul 标签内外边距问题 ul 标签在 IE6 IE7 中 有个默认的外边距 但是在 IE8 以上及其他浏览器中 有个默认
  • websphere6.x 调用集群EJB的Context.PROVIDER_URL写法

    import java util Hashtable import javax naming Context import javax naming InitialContext Hashtable env new Hashtable en

随机推荐

  • caffe源码解析 — net.cpp

    Net类是Solve类的一个成员 在net cpp中定义了对Net的所有操作 其中包括 Init GetLearningRateAndWeightDecay ForwardPrefilled Backward ShareTrainedLay
  • 计算机数值转换教案,计算机数值方法教案.doc

    第O章 绪论 一 教学设计 1 教学内容 数值计算方法这门课程的形成背景及主要研究内容 研究方法 主要特点 算法的有关概念及要求 误差的来源 意义 及其有关概念 数值计算中应注意的一些问题 2 重点难点 算法设计及其表达法 误差的基本概念
  • 数据结构——快速排序

    1 原理及代码实现 快速排序 快速排序也是一种分治的排序算法 快速排序和归并排序是互补的 归并排序将数组分成两个子数组分别排序 并将有序的子数组归并以将整个数组排序 会需要一个额外的数组 而快速排序的排序方式是当两个子数组都有序时 整个数组
  • @Async注解线程池

    在启动类上添加 EnableAsync配合该注解使用 自定义线程池方法 implements AsyncConfigurer extends AsyncSupportConfigurer Bean 注入线程池 public interfac
  • Shell中表示数字跨度的几种方式

    在Shell脚本中 如果要输出数字为0 20中3的倍数 可以使用下面三种方式来完成 方式一 i 0 i lt 20 i 3 for i 0 i lt 20 i 3 do echo i done 方式二 0 20 3 for i in 0 2
  • ElasticSearch 评分排序

    背景 通过脚本改变评分 背景 近期有一个需求 需要对优惠券可用商品列表加个排序 只针对面值类的券不包括折扣券 需求是这样的 假设有一张面值券 50 块钱 可用商品列表 A 100 B 40 C 10 当用户查询当前券可用商品列表的时候优先将
  • RuntimeError: expected dtype Double but got dtype Float 损失求导出错

    求导出现问题 源代码 修改为 把损失修改为loss clone detach requires grad
  • 卫星通信的资源调度 vs 地面无线通信的资源调度

    以OFDM系统为例 考虑多个用户共用多个子载波的场景 一 两类资源 调整时频资源 即基站或卫星决定给各个用户在哪些时隙分配多少子载波 调整发射功率 即基站或卫星决定给每个用户在每个子信道上的功率是多大 用字母 P n k P n k Pn
  • 【TestNG】TestNG使用教程详解

    一 TestNG介绍 TestNG是Java中的一个测试框架 类似于JUnit 和NUnit 功能都差不多 只是功能更加强大 使用也更方便 详细使用说明请参考官方链接 https testng org doc index html 二 Te
  • anaconda 创建虚拟环境、激活及使用的基本方法

    1 查看当前存在的虚拟环境 conda env list 2 创建虚拟环境 环境名 conda create n 环境名 python X X 3 激活指定虚拟环境 activate 环境名 4 删除虚拟环境 conda remove n
  • c++ 鼠标控制

    windows下获得鼠标位置和控制鼠标 include
  • 使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system...

    好多年没碰过前端jquery了 用一两天时间重温一下 刚好写个小工具 不递归取文件夹和文件 只写一层 保持足够简单 验证和参数判断暂不写 毕竟只写了几个小时而已 功能算完备了 添加一个简单的管理员权限管理修改的所有功能即可放出去了 看来还不
  • LaTeX各种算法排版

    1 首先在导言区加入语句 usepackage algorithm usepackage algorithmic 2 例1 begin algorithm caption A label alg A begin algorithmic ST
  • AUTOSEMO“恒以致远,共创共赢”主题研讨会圆满落幕

    2023年8月31日 中国汽车工业协会软件分会中国汽车基础软件生态标委会 简称 AUTOSEMO 与天津市西青区人民政府联合主办 北京经纬恒润科技股份有限公司承办的 恒以致远 共创共赢 主题研讨会在天津隆重召开 本次研讨会是AUTOSEMO
  • vue2.0使用less 创建全局的颜色变量,配置主题色

    1 使用场景 项目中需要统一配置前端的主题样式 我们可以使用less创建 theme colors rgba 54 174 149 1 变量 供全局调用 2 安装依赖 cnpm install less less loader save 安
  • 【Android】WebView控件最全使用解析

    WebView控件最全使用解析 一 WebView 概述 二 WebView使用基础篇 2 1添加方式 2 2 加载远程网页 2 3 加载本地网页 2 4 加载HTML片段 2 5 WebView 常用方法 三 WebView 进阶篇 3
  • Android--Recovery模块之恢复出厂设置

    一 在进行详细流程分析之前 先看一下几个重要概念 一 Recovery的工作需要整个软件平台的配合 从架构角度看 有三个部分 1 Main system 用boot img启动的Linux系统 Android的正常工作模式 2 Recove
  • 【MyBatis】自定义resultMap三种映射关系

    目录 一 一对一映射 One to One 1 1 表关系 1 2 resultMap设置自定义映射 二 一对多映射 One to Many 2 1 创建实体 2 2 级联方式处理映射关系 2 3 定义SQL 2 4 OrderMapper
  • jquery 购物车飞入特效--全网最简单

    有个插件 jquery fly js 可以搞定 好象特点之一是有抛物线效果 如果要求不高 可以看看我这个 其实也是在网上看到的 作了些改进 三个元素 被点击的div 飞翔的小红点 装小红点的div 购物车 div 被点击的 div div
  • (一)@Input属性讨论

    Input Declares a data bound input property Angular automatically updates data bound properties during change detection 大