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>