Input and Output properties

  输入属性是一个带有@Input 装饰器的可设置属性,当它通过属性绑定的形式被绑定时,值会"流入"到这个属性。

  输出属性是一个带有@Output 装饰器的可观察对象型的属性。此属性几乎总是返回Angular 的Angular 的EventEmitter.当它通过事件绑定的形式被绑定时,值会“流出”这个属性。

  你只能通过它的输入和输出属性将其绑定到其它组件。

绑定到 组件自己

  本组件的属性绑定到它自己模板上,属性位于 等号(=)的右边。

绑定到 其他组件

       本组件绑定其他组件的属性,其它组件的属性位于等号(=)的左侧。而且 除非这些属性是输入或输出属性

  1. <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
  2. </app-hero-detail>

为什么 外部组件应该只能绑定到组件的公共(允许绑定) API 上?

  其它组件不应该进行这种毫无限制的访问。 如果任何人都可以绑定到你的组件的任何属性上,那么这个组件就很难维护。

Angular 要求你显式声明那些 API。 它让你可以自己决定哪些属性是可以被外部组件绑定的。

所有数据绑定属性必须是 TypeScript 的公共属性,Angular 永远不会绑定到 TypeScript 中的私有属性。

因此,Angular 需要一些其它方式来标记出那些允许被外部组件绑定到的属性。 这种其它方式,就是 @Input() 和 @Output() 装饰器。

声明输入与输出属性

  1. @Input() hero: Hero;
  2. @Output() deleteRequest = new EventEmitter<Hero>();

另外,还可以在指令元数据的 inputs 或 outputs 数组中标记出这些成员:

  1. @Component({
  2. inputs: ['hero'],
  3. outputs: ['deleteRequest'],
  4. })

输入还是输出?

  输入属性通常接收数据值。 输出属性暴露事件生产者,如 EventEmitter 对象。

给输入/输出属性起别名

例如,在 <div> 上用 myClick 选择器应用指令时, 希望绑定的事件属性也叫 myClick

  1. <div (myClick)="clickMessage=$event" clickable>click with myClick</div>

把别名传进@Input/@Output 装饰器,就可以为属性指定别名,即把 myClick 这个别名指向了指令自己的 clicks 属性:click.directive.ts

  1. @Output('myClick') clicks = new EventEmitter<string>(); // @Output(alias) propertyName = ...

也可在 inputs 和 outputs 数组中为属性指定别名。 可以写一个冒号 (:) 分隔的字符串,左侧是指令中的属性名,右侧则是公共别名:click.directive.ts

  1. @Directive({
  2. outputs: ['clicks:myClick'] // propertyName:alias
  3. })

Angular2 组件与模板 -- 输入和输出属性的更多相关文章

  1. Angular快速学习笔记(3) -- 组件与模板

    1. 显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性. 使用插值表达式显示组件属性 要显示组件的属性,最简单的方式就是通过插值表 ...

  2. angular 输入属性@Input , 输出属性@Output , 中间人模式

    1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...

  3. Angular 组件与模板 - 属性指令

    指令概览 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素.组件或其它指令的外观和行为 ...

  4. Angular2 组件通信

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...

  5. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  6. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  7. angular2 组件交互

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...

  8. Angular2组件与指令的小实践

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  9. angular2组件通讯的几种方式

    最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978: 1.通过输入型绑定把数据从父组件传到子组件 HeroChildComponen ...

随机推荐

  1. 常见URL字符及URL编码值

    大家上网的时候一定会看到很多这类情况有的网页地址都是%22%32%11%23%21等这种机器语言恐怕只有机器能马上辨认吧现在我把大概知道的总结一下 字符                         ...

  2. Java Socket网络编程Client端详解

    此类实现客户端套接字(也可以就叫“套接字”).套接字是两台机器之间的通信端点. Socket client = new Socket(ip,port);//创建一个流套接字并将其连接到指定 IP 地址 ...

  3. atitit.资源释放机制--attilax总结

    atitit.资源释放机制--attilax总结 1. .全手工, 1 2. 引用计数, 1 2.1. 成本也显而易见. 1 2.2. 循环引用的问题, 2 2.3. 引用计数方式事实上也有经典的卡顿 ...

  4. vim-程序员的利器

    个人觉得vi使用熟练后就离不开了,用了它效率会提升不少,但是没了它可能还赶不上以前的速度,给惯坏了. 以下是本人无耻的复制和粘贴的:(附图一张方便学习) Vim目前已经有各主流系统的版本,尽管vim较 ...

  5. sass 的使用心得

    //定义颜色 $c55:#; $c22:#; $c33:#; $c99:#; $c77:#; $c00:#; $cff:#fff; $caa:#aaa; $ccc:#ccc; $cf0:#f0f0f0 ...

  6. V模型与测试级别

    V模型与测试级别[1] 2015-06-24 目录 2.1.1 V模型2.2.1 单元测试2.2.2 集成测试2.2.3 系统测试2.2.4 验收测试 2.1.1 V模型 返回 单元测试:验证软件单元 ...

  7. c语言中struct的内存对齐

    为了让CPU能够更舒服地访问到变量,struct中的各成员变量的存储地址有一套对齐的机制.这个机制概括起来有两点:第一,每个成员变量的首地址,必须是它的类型的对齐值的整数倍,如果不满足,它与前一个成员 ...

  8. 数字集成电路设计-14-DPI

    引言 在进行IC验证时,尤其是规模较大的时候,单纯用Verilog和SV来构建testbench.可能会稍显吃力. 在这样的情况下,使用C或者C++等软件语言往往会大大加快验证速度,提高验证效率. P ...

  9. sama5d3 环境检测 adc测试

    #include <stdio.h>#include <stdlib.h>#include <unistd.h>#include <string.h># ...

  10. CentOS 7 上systemctl 的用法

    我们对service和chkconfig两个命令都不陌生,systemctl 是管制服务的主要工具, 它整合了chkconfig 与 service功能于一体. systemctl is-enable ...