1.input properties, typically adorned with @Input decorations.

1. import{Component,Input}from'@angular/core';
2. import{Hero}from'./hero';
3. @Component({
4. selector:'hero-child',
5. template:`
6. <h3>{{hero.name}} says:</h3>
7. <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
8. `
9. })
10. export
    classHeroChildComponent{
11. @Input() hero:Hero;
12. @Input('master') masterName:string;
13. //The second @Input aliases the child component property name masterName as 'master'.
14. }
15. 2.在父元件就可以這樣使用了
16. 1. import{Component}from'@angular/core';
    2. import{ HEROES }from'./hero';
    3. @Component({
    4. selector:'hero-parent',
    5. template
       :`
    6. <h2>{{master}} controls {{heroes.length}} heroes</h2>
    7. <hero-child *ngFor="let hero of heroes"
    8. [hero]="hero"
    9. [master]="master">
    10. </hero-child>
    11. `
    12. })
    13. exportclassHeroParentComponent{
    14. heroes= HEROES;
    15. master:string='Master';
    16. }
    還可以通過定義子元件存取器來跟父元件的資料互動哦：
17. 1.
18. 1. import{Component,Input}from
       '@angular/core';
    2. @Component({
    3. selector:'name-child',
    4. template:'<h3>"{{name}}"</h3>'
    5. })
    6. exportclassNameChildComponent{
    7. private _name ='';
    8. @Input()
    9. set name(name:string){
    10. this._name =(name && name.trim())||'<no name set>';
    11. }
    12. get name():string{returnthis._name;}
    13. }
    2.
19. 1. import{Component}from'@angular/core';
    2. @Component({
    3. selector:'name-parent',
    4. template:`
    5. <h2>Master controls {{names.length}} names</h2>
    6. <name-child *ngFor="let name of names" [name]="name"></name-child>
    7. `
    8. })
    9. exportclassNameParentComponent{
    10. // Displays 'Mr. IQ', '<no name set>', 'Bombasto'
    11. names =['Mr. IQ',' ',' Bombasto '];
    12. }