angular2组件通信

父到子

父组件:
    ts部分:
        @Component({
              selector: 'app-info',
              templateUrl: './info.component.html',
              styleUrls: ['./info.component.css'],
        })
        export class InfoComponent implements OnInit {
 

        num:number = 0;

        constructor() {
   
        }
        changeNum(){
            this.num++;
        }

        }    
            
    模板部分:
    <button (click)="changeNum()">传递给子组件</button>
    <app-child [content]="num"></app-child>

子组件:
    ts部分:
         @Input() content:number;
    模板部分:
         <p>{{ content }}</p>

 

子到父

父组件
     public how : string = "how";
     getDate(str:string){
         this.how = str;
     }


     <app-list (updateNumber)="getDate($event)"></app-list>

子组件
    impress(str:string){
        let data = str; 
        this.updateNumber.emit(data)
   }

    <ul>
    <li *ngFor="let item of items" (click)="impress(item)">{{ item }}</li>
  </ul>

 

posted @ 2017-08-19 20:56  会飞的Tiger  阅读(158)  评论(0编辑  收藏  举报