天天看點

angular父子元件的傳值方法

父子元件的傳值方法:

在前端利用點選事件擷取id值:

<a (click)="onclick1(root.cate_id)" (mousemove)="Mousemove1(root.cate_id,root.list)" (mouseleave)="Mouseleave1(root.cate_id)" class="said-bar-classification">
  {{root.cate_name}} <small>  <!--( {{root.products_count}} ) --></small>
  <span class="triangle"></span>
</a>
           

在對應的ts檔案中利用@Output()方法來發送:如:@Output() onCagegoryChange = new EventEmitter<any>();來發送

然後在點選事件中發送出去

onclick1(cate_id: number) {
  this.onCagegoryChange.emit(cate_id);
}
           

再調用該子元件的父級元件中擷取:

<app-categorymenu [categories]="categories"  (onCagegoryChange)="onCagegoryChange($event)"></app-categorymenu>
           

在父級的ts檔案中調用擷取的方法

onCagegoryChange($event) {
  console.log('子元件傳入的類别: ' + $event);
  console.log($event);
  this.cateid = $event;
  this.pageNum=1; //預設設定
  this.pageSize=10; //預設設定
  this.getGoods();
}
           

擷取到了傳過來的值。