Angular2 组件与模板 -- 输入和输出属性

Input and Output properties

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

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


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

绑定到 组件自己

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

绑定到 其他组件

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

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

为什么 外部组件应该只能绑定到组件的公共（允许绑定） API 上？

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

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

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

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

声明输入与输出属性

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

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

@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

输入还是输出？

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

给输入/输出属性起别名

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

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

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

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

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

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