私はディレクティブを使用してダイアログを表示して継続を確認していますが、ディレクティブから戻るときに親コンポーネントが元のスコープを失いました。 console.logはundefinedを返します。Angular2 - ディレクティブを使用してコンポーネントを失うスコープで関数を実行する
プロセス:送信ボタンをクリックすると、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);
}
}
トニーは、あなたがplunker –
@RahulSinghを複製することができます - ここにありますPlunkerの例https://plnkr.co/edit/CoNqz7yv8yaGMMRRarmu – Tony