typescript 将函数传递给子组件，'this' 的错误上下文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45690530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing function to child component, wrong context of 'this'
提问by RagnarLodbrok
I am trying to pass a function to a child component. Passing the function works fine. Problem is, if I want to change property values of the parent component, this wont work since 'this' is not referencing to the parent component, but to the child component (DatagridComponent in my case)
我正在尝试将函数传递给子组件。传递函数工作正常。问题是，如果我想更改父组件的属性值，这将不起作用，因为“this”不是引用父组件，而是引用子组件（在我的情况下为 DatagridComponent）
The context of thisseems to be the problem. See comments in code below.
的上下文this似乎是问题所在。请参阅下面代码中的注释。
Parent component:
父组件：
@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, passing onSelectUser as function:
HTML，将 onSelectUser 作为函数传递：
<app-datagrid [onSelection]="onSelectUser"></app-datagrid>
Child component:
子组件：
@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 of child component:
子组件的 HTML：
<div *ngFor="let item of items" (click)="onSelectListItem(item)">
....
</div>
How can I accomplish this?
我怎样才能做到这一点？
回答by Milad
The question is more about thiscontext, which you can fix it this way :
问题更多地与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 :(
}
We're using fat arrow to keep the context of the current component inside the function
我们使用粗箭头将当前组件的上下文保存在函数内
回答by Pankaj Parkar
Use Outputevent to communicate from child component to parent component. Use Inputproperty binding to pass data from parentto child
使用Output事件从子组件到父组件进行通信。使用Input属性绑定将数据从parent子节点传递
Html
html
<app-datagrid (onSelection)="onSelectUser($event)"></app-datagrid>
Component
零件
@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.
}
See Also Component Interaction
另请参阅组件交互
