рдЬрдм рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреБрдЫ рдорд╣рддреНрд╡рдкреВрд░реНрдг рдФрд░ / рдпрд╛ рдЕрдкрд░рд┐рд╡рд░реНрддрдиреАрдп рдХреНрд░рд┐рдпрд╛рдПрдВ рдХрд░рддрд╛ рд╣реИ, рддреЛ рд╕рд░реНрд╡рд░ рдХреЛ рдЕрдиреБрд░реЛрдз рднреЗрдЬрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ, рдЖрдкрдХреЛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╕реЗ рдкреБрд╖реНрдЯрд┐ рдХреЗ рд▓рд┐рдП рдкреВрдЫрдирд╛ рд╣реЛрдЧрд╛редрдПрдХ рдирд┐рдпрдо рдХреЗ рд░реВрдк рдореЗрдВ, "рдХреНрдпрд╛ рдЖрдк рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рд╣реИрдВ рдХрд┐ рдЖрдк рдРрд╕рд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдФрд░ рд╡рд╣" рдореЛрдбрд▓ рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реИ рдФрд░ рдиреАрдЪреЗ рджреЛ рдмрдЯрди рд╣реИрдВ: рд╣рд╛рдБ рдФрд░ рдирд╣реАрдВред рдпрджрд┐ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ "рд╣рд╛рдБ" рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддрд╛ рд╣реИ, рддреЛ рд╣рдо рд╕рд░реНрд╡рд░ рдХреЛ рдПрдХ рдЕрдиреБрд░реЛрдз рднреЗрдЬрддреЗ рд╣реИрдВ рдФрд░ рдореЛрдбрд▓ рдХреЛ рдмрдВрдж рдХрд░ рджреЗрддреЗ рд╣реИрдВред рдпрджрд┐ рдирд╣реАрдВ, рддреЛ рдмрд╕ рдореЛрдбрд▓ рдмрдВрдж рдХрд░реЗрдВредрдпрд╣ рдорд╛рдирдХ рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рд╣реИ рдЬреЛ рдЖрдорддреМрд░ рдкрд░ рдПрдХ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ рдХрдИ рд╕реНрдерд╛рдиреЛрдВ рдкрд░ рдЙрдкрдпреЛрдЧ рдХреА рдЬрд╛рддреА рд╣реИред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдкрд░рд┐рдпреЛрдЬрдирд╛ рдХреА рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдХрд░рддреЗ рд╕рдордп, рдЗрд╕рдореЗрдВ рдХреБрдЫ рдФрд░ рд╕реНрдерд╛рдиреЛрдВ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреА рд╕рдВрднрд╛рд╡рдирд╛ рд╣реЛрддреА рд╣реИ, рдЬрд╣рд╛рдБ рдкреБрд╖реНрдЯрд┐ рдХреЗ рддреМрд░-рддрд░реАрдХреЛрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рдЗрд╕рд▓рд┐рдП, рдХреЛрдб рдХреЗ рджреЛрд╣рд░рд╛рд╡ рд╕реЗ рдмрдЪрдиреЗ рдХреЗ рд▓рд┐рдП, рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рдЗрд╕ рддрд░рд╣ рдХреЗ рдПрдХ рдореЙрдбрд▓ рдХреЛ рдПрдХ рдЕрд▓рдЧ рдШрдЯрдХ рдореЗрдВ рдирд┐рдХрд╛рд▓рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рд╣рдереМрдбрд╝рд╛ рдмреИрд╕рд╛рдЦреА рдХреЗ рдкреНрд░рд▓реЛрднрди рд╕реЗ рдмрдЪрдиреЗ рдХреЗ рд▓рд┐рдП, рдЗрд╕ рдШрдЯрдХ рдХреЛ рдпрдерд╛рд╕рдВрднрд╡ рдмрд╣реБрдореБрдЦреА рдФрд░ рдЙрдкрдпреЛрдЧ рдореЗрдВ рдЖрд╕рд╛рди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПредрдЧреАрдд рд╕реЗ рд▓реЗрдХрд░ рдПрдХреНрд╢рди рддрдХ рдЪрд▓рддреЗ рд╣реИрдВред рдореЛрдбрд▓ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдо рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВрдЧреЗредрд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЗрд╕ рддрд░рд╣ рдХреЗ рдПрдХ рдШрдЯрдХ рдХрд╛ рдореЗрд░рд╛ рд╕рдВрд╕реНрдХрд░рдг:рд╣рд╛рдВ-рдирд╛-modal.component.html<div bsModal #yesNoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-{{type}}" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
<button type="button" class="close" (click)="onNoClick()" aria-label="Close">
<span aria-hidden="true">├Ч</span>
</button>
</div>
<div class="modal-body">
<p>{{body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="onNoClick()">{{noBtnText}}</button>
<button type="button" class="btn btn-{{type}}" (click)="onYesClick()">{{yesBtnText}}</button>
</div>
</div>
</div>
</div>
рд╣рд╛рдВ-рдирд╛-modal.component.tsimport {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap/modal';
@Component({
selector: 'app-yes-no-modal',
templateUrl: './yes-no-modal.component.html',
styleUrls: ['./yes-no-modal.component.css']
})
export class YesNoModalComponent implements OnInit {
@ViewChild('yesNoModal') public yesNoModal: ModalDirective;
@Input() private type = 'info';
@Input() private title = '';
@Input() private body = '';
@Input() private yesBtnText = '';
@Input() private noBtnText = '';
constructor() { }
ngOnInit(): void {
}
public showAsync(data = null): Promise<any> {
return new Promise<any>((resolve, reject) => {
this.yesNoModal.show();
this.onYesClick = () => {
this.yesNoModal.hide();
resolve(data);
};
this.onNoClick = () => {
this.yesNoModal.hide();
reject(data);
};
});
}
private onYesClick(): any {}
private onNoClick(): any {}
}
рдореИрдВрдиреЗ рдЪреЗрддрд╛рд╡рдиреА рд╢реАрд░реНрд╖рдХ, рдЪреЗрддрд╛рд╡рдиреА рдкрд╛рда, рд░рдВрдЧ рдпреЛрдЬрдирд╛ / рдорд╣рддреНрд╡ рд╕реНрддрд░ (рдЦрддрд░реЗ, рд╕реВрдЪрдирд╛, рдЪреЗрддрд╛рд╡рдиреА) рдХреЛ рдорд╛рдкрджрдВрдбреЛрдВ рдореЗрдВ рдбрд╛рд▓ рджрд┐рдпрд╛ рд╣реИ, рдЖрдк рдмрдЯрди рдкрд░ рд▓реЗрдмрд▓ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВредрдореЛрдбрд▓ рджрд┐рдЦрд╛рдиреЗ рдХреЗ рд▓рд┐рдП, showAsync рдХреЛ рдХреЙрд▓ рдХрд░реЗрдВ, рдЬрд┐рд╕рдореЗрдВ рд╣рдо рдордирдорд╛рдирд╛ рдбреЗрдЯрд╛ рдЯреНрд░рд╛рдВрд╕рдлрд░ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рд╣рдо рд╕рдВрдХрд▓реНрдк / рдЕрд╕реНрд╡реАрдХрд╛рд░ рдореЗрдВ рд╕рдорд╛рди рдбреЗрдЯрд╛ рдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╣реИрдВредрдЕрдЧрд▓рд╛, рдПрдХ рдЕрдиреНрдп рдШрдЯрдХ рдореЗрдВ рдореЛрдбрд▓ рдХрдиреЗрдХреНрдЯ рдХрд░реЗрдВ:account.component.html<app-yes-no-modal
#deleteModal
body=" ?"
title=""
type="danger"
></app-yes-no-modal>
<button (click)="delete()"></button>
account.component.tsimport {Component, OnInit, ViewChild} from '@angular/core';
import {YesNoModalComponent} from '../_common/yes-no-modal/yes-no-modal.component';
import {DeleteUserEndpoint} from '../../api/delete-user.endpoint';
import {ErrorService} from '../../services/error/error.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css'],
providers: [DeleteUserEndpoint]
})
export class AccountComponent implements OnInit {
@ViewChild('deleteModal') public deleteModal: YesNoModalComponent;
constructor (private deleteUserEndpoint: DeleteUserEndpoint) {
}
delete(data) {
this.deleteModal.showAsync(data).then(result => {
this.deleteUserEndpoint.execute(result);
});
}
ngOnInit(): void {
}
}
рдореЗрд░реА рд░рд╛рдп рдореЗрдВ, рдЗрд╕ рддрд░рд╣ рдХреЗ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдпрдерд╛рд╕рдВрднрд╡ рд╕рд░рд▓ рдФрд░ рдкрдардиреАрдп рджрд┐рдЦрддрд╛ рд╣реИредрддреБрд▓рдирд╛ рдХреЗ рд▓рд┐рдП, EventEmitter рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдЖрдкрдХреЛ рдкреНрд░рддреНрдпреЗрдХ рдШрдЯрдХ рдореЗрдВ рджреЛ рд╡рд┐рдзрд┐рдпреЛрдВ рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рдирд╛ рд╣реЛрдЧрд╛ - showDeleteModal (), рдЬрд┐рд╕реЗ рдбрд┐рд▓реАрдЯ рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдХреЗ рдмреБрд▓рд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдбрд┐рд▓реАрдЯ () рд╡рд┐рдзрд┐, рдЬрд┐рд╕реЗ рдореЛрдбрд▓ рдЗрд╡реЗрдВрдЯ рджреНрд╡рд╛рд░рд╛ рдмреБрд▓рд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдпрджрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рд╡рд┐рднрд┐рдиреНрди рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреНрд░рд┐рдпрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рдШрдЯрдХ рдореЗрдВ рдХрдИ рдРрд╕реЗ рдореЛрдбрд▓ рд╣реИрдВ, рддреЛ рдХреЛрдб рдХреА рдкрдардиреАрдпрддрд╛ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдкреАрдбрд╝рд┐рдд рд╣реЛрдЧреАредрдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдореЗрдВ, рд╣рдореЗрд╢рд╛ рдХреА рддрд░рд╣, рдореИрдВ рд░рдЪрдирд╛рддреНрдордХ рдФрд░ рдЙрдЪрд┐рдд рдЖрд▓реЛрдЪрдирд╛ рдХреА рдЙрдореНрдореАрдж рдХрд░рддрд╛ рд╣реВрдВред