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>

 

转载于:https://www.cnblogs.com/blogcxz/p/7397885.html