angular2.0父子组件通信---如何通过组件属性将数据传递给子组件

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

1. import{ Component,Input} from'@angular/core';
3. import{ Hero} from'./hero';
5. @Component({
6. selector:'hero-child',
7. template:`
8. <h3>{{hero.name}} says:</h3>
9. <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
10. `
11. })
12. exportclassHeroChildComponent{
13. @Input() hero: Hero;
14. @Input('master') masterName: string;
15. //The second @Input aliases the child component property name masterName as 'master'.
16. }
17. 2.在父组件就可以这样使用了
18. 1. import{ Component} from'@angular/core';
    3. import{ HEROES }from'./hero';
    5. @Component({
    6. selector:'hero-parent',
    7. template:`
    8. <h2>{{master}} controls {{heroes.length}} heroes</h2>
    9. <hero-child *ngFor="let hero of heroes"
    10. [hero]="hero"
    11. [master]="master">
    12. </hero-child>
    13. `
    14. })
    15. exportclassHeroParentComponent{
    16. heroes= HEROES;
    17. master:string= 'Master';
    18. }
    还可以通过定义子组件存取器来跟父组件的数据交互哦：
19. 1.
20. 1. import { Component, Input } from '@angular/core';
    3. @Component({
    4. selector: 'name-child',
    5. template: '<h3>"{{name}}"</h3>'
    6. })
    7. export class NameChildComponent {
    8. private _name = '';
    10. @Input()
    11. set name(name: string) {
    12. this._name = (name && name.trim()) || '<no name set>';
    13. }
    15. get name(): string { return this._name; }
    16. }
    2.
21. 1. import { Component } from '@angular/core';
    3. @Component({
    4. selector: 'name-parent',
    5. template: `
    6. <h2>Master controls {{names.length}} names</h2>
    7. <name-child *ngFor="let name of names" [name]="name"></name-child>
    8. `
    9. })
    10. export class NameParentComponent {
    11. // Displays 'Mr. IQ', '<no name set>', 'Bombasto'
    12. names = ['Mr. IQ', ' ', ' Bombasto '];
    13. }