Angular2 - ディレクティブを使用してコンポーネントを失うスコープで関数を実行する

Question

私はディレクティブを使用してダイアログを表示して継続を確認していますが、ディレクティブから戻るときに親コンポーネントが元のスコープを失いました。 console.logはundefinedを返します。

プロセス：送信ボタンをクリックすると、appConfirm（ディレクティブ）がクリックイベントを処理し、続行するダイアログを表示します（はい/いいえ）。 「はい」を選択すると、親コンポーネントに戻り、送信機能が実行されますが、スコープは失われます。

提案が参考になります。ありがとう！ Plunkerで 例：https://plnkr.co/edit/CoNqz7yv8yaGMMRRarmu

テンプレート：

<button [disabled]="disableButton" [(appConfirm)]="submit" style="primary" class="button-input btn btn-primary center-block">Submit</button>

指令：

import {Directive, HostListener, Input} from '@angular/core'; 
import {SharedService} from '../../core/shared.service'; 
import {MdDialog} from "@angular/material"; 
import {Continue, Confirmation, ContinueConfirmation} from "../../dialog/dialog.component"; 
import {FormComponent} from '../../form/form.component' 

@Directive({ 
    selector: '[appConfirm]', 
}) 
export class ConfirmDirective { 
    constructor(
     private sharedService: SharedService, 
     private dialog: MdDialog 
    ) {} 

    @Input() appConfirm =() => {}; 
    @Input() confirmMessage = 'Are you sure you want to do this?'; 
    @HostListener('click', ['$event']) 
    confirmFirst(event: Event) { 
     let dialogRef = this.dialog.open(Confirmation,{disableClose:true}); 
     dialogRef.afterClosed().subscribe(result=>{ 
       if(result) { 
        this.appConfirm(); 
       } 

     }); 
    } 
} 

はコンポーネント：Plunkerを更新しました

@Component({ 
     selector: 'app-form', 
     templateUrl: './form.component.html', 
     styleUrls: ['./form.component.css'] 
    }) 
    export class FormComponent { 
     myButton: string = 'test' 


     submit(){ 
console.log(this.myButton); 
      } 
    } 

Answer 1

それは今 の作品

visitRangle =() => { // change is here the fat arrow function 
    console.log("My button should displaY: " + this.myButton); 
    console.log('Visiting rangle'); 
    location.href = 'https://rangle.io'; 
    } 

this損失あなたは自動的にクラスのインスタンスにこれをバインドするために脂肪の矢印の機能を使用できるように、このように使用、それはスコープ：