角度 - 子コンポーネントへの関数の渡し、間違ったコンテキスト 'this'

Question

子コンポーネントに関数を渡そうとしています。関数を渡すと問題なく動作します。問題は、親コンポーネントのプロパティ値を変更したい場合、 '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> 

どうすればこのことができますか？

Answer 1

Outputイベントを使用して、子コンポーネントから親コンポーネントに通信します。子供に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

質問がの詳細ですが、データを渡すために結合Inputプロパティを使用しますあなたはこのようにそれを修正することができますコンテキスト、：私たちは