angular - 將函數傳遞給子元件時，'this' 的上下文錯誤

我正在嘗試將一個函數傳給子組件。傳遞函數本身沒有問題。問題是，如果我想更改父組件的屬性值，這將無法運作，因為 'this' 並不是指向父組件，而是指向子組件（在我的情況下是 DatagridComponent）

this 的上下文似乎是問題所在。請參見下面程式碼中的註解。

父元件：

@Component({
  selector: 'app-user-management',
  templateUrl: './user-management.component.html',
  styleUrls: ['./user-management.component.css'],
})
export class UserManagementComponent implements OnInit {
  showUserDetails: boolean: false;
  showUsergroupDetails = false;

  onSelectUser() {
    this.showUsergroupDetails = false;
    this.showUserDetails = true;
    console.log(this.showUsergroupDetails); // prints false, as expected
    console.log(this.showUserDetails); // prints true, as expected
    console.log(this); // prints DatagridComponent :(
}

HTML，將 onSelectUser 作為函數傳遞：

<app-datagrid [onSelection]="onSelectUser"></app-datagrid>

子元件：

@Component({
  selector: 'app-datagrid',
  templateUrl: './datagrid.component.html',
  styleUrls: ['./datagrid.component.css']
})
export class DatagridComponent implements OnInit {
  @Input() onSelection: () => {};

  onSelectListItem(item: any) {

    // some code

    if (this.onSelection) {
      this.onSelection(); // is executed, results see comments in parent component
    }
  }
}

子組件的 HTML：

<div *ngFor="let item of items" (click)="onSelectListItem(item)">
   ....
</div>

我該如何完成這個？

答案＃1

這個問題更多是關於 this 上下文，你可以這樣修復它：

onSelectUser = ()=>{ // note this part 
    this.showUsergroupDetails = false;
    this.showUserDetails = true;
    console.log(this.showUsergroupDetails); // prints false, as expected
    console.log(this.showUserDetails); // prints true, as expected
    console.log(this); // prints DatagridComponent :(
}

我們使用胖箭頭來保持函數內當前元件的上下文

答案＃2

使用 Output 事件從子元件與父元件通信。使用 Input 屬性綁定將資料從 parent 傳遞到子元件

Html

<app-datagrid (onSelection)="onSelectUser($event)"></app-datagrid>

元件

@Component({
  selector: 'app-datagrid',
  templateUrl: './datagrid.component.html',
  styleUrls: ['./datagrid.component.css']
})
export class DatagridComponent implements OnInit {
  @Output() onSelection: EventEmitter<any> = new EventEmitter();

  onSelectListItem(item: any) {
     this.onSelection.emit(item);
  }
}

//app-user-management method will receive item object
onSelectUser(item: any) {
   //here you would have item object.
}

另見元件互動