Angular2 - 使用指令在组件丢失范围内执行功能

Question

我正在使用指令来显示对话框并确认继续，但是当从指令返回时，我的父组件失去了它的原始范围。 console.log 将返回未定义。

Process：当点击提交按钮时，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();
                }

        });
  }
}

组件：

    @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

更新了 Plunker 现在可以使用了 LINK

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 以这种方式使用时会失去作用域，因此您可以使用粗箭头函数自动将其绑定到类实例：