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 })

?

轉載于:https://www.cnblogs.com/AndyChen2015/p/9632865.html

總結

以上是生活随笔為你收集整理的Angular2 组件与模板 -- 输入和输出属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。