将函数传递给子组件，“this”的上下文错误

Question

我正在尝试将函数传递给子组件。传递函数工作正常。问题是，如果我想更改父组件的属性值，这将不起作用，因为“this”不是引用父组件，而是引用子组件（在我的情况下为 DatagridComponent）

this 的上下文似乎是问题所在。请参阅下面代码中的 cmets。

父组件：

@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>

我怎样才能做到这一点？

Answer 1

使用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.
}

另见Component Interaction

Answer 2

这个问题更多是关于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 :(
}

我们使用粗箭头将当前组件的上下文保持在函数内