У меня есть компонент, допустим, он называется "Форма" , и наряду с этим у меня есть еще один компонент, который мы можем назвать "Списки файлов" .
"Form" - это "NbWindowService", "Filing Lists" - это "LocalDataSource" из "ng2-smart-table". Теперь я хочу, чтобы после того, как «Форма» была закончена или уничтожена, «Списки файлов» должны быть обновлены / обновлены так же, как я прочитал в документации. Как это сделать правильно?
сверхурочные-form.component.ts
import { Component, OnInit } from '@angular/core';
import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
import { OvertimeService } from '../../services/overtime.service';
import { Overtime } from '../../models/overtime.model';
@Component({
selector: 'ngx-overtime-form',
templateUrl: './overtime-form.component.html',
styleUrls: ['./overtime-form.component.scss']
})
export class OvertimeFormComponent implements OnInit {
showMessages: any = {};
user: any;
overtime: Overtime = {
//some model values instantiation
};
constructor(private overtimeService: OvertimeService,
private authService: NbAuthService) {
this.authService.onTokenChange()
.subscribe((token: NbAuthJWTToken) => {
if (token.isValid()) {
this.user = token.getPayload();
this.overtime.employee_id = this.user.employee_id;
}
});
}
fileOvertime() {
this.showMessages = {};
this.overtimeService.overtimeFiling(this.overtime).subscribe(
(result) => {
this.showMessages.success = result
this.overtime.employee_id = this.overtime.employee_id;
}, (err) => {
this.showMessages.error = err.error;
this.overtime.employee_id = this.overtime.employee_id;
}
)
}
ngOnInit() {
}
}
сверхурочные-filing.component.ts
import { Component, OnInit } from '@angular/core';
import { NbWindowService } from '@nebular/theme';
import { DatePipe } from '@angular/common';
import { LocalDataSource } from 'ng2-smart-table';
import { OvertimeService } from '../services/overtime.service';
import { OvertimeFormComponent } from '../forms/overtime-form/overtime-form.component';
@Component({
selector: 'ngx-overtime-filing',
templateUrl: './overtime-filing.component.html',
styleUrls: ['./overtime-filing.component.scss']
})
export class OvertimeFilingComponent implements OnInit {
settings = {
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true,
},
actions: {
add: false,
},
columns: {
status: {
title: 'Status',
type: 'string'
},
transaction_no: {
title: 'Transaction #',
type: 'string'
},
date: {
title: 'Date',
valuePrepareFunction: (date) => {
return this.datePipe.transform(new Date(date), 'MMM dd, yyyy');
}
},
start_date: {
title: 'Start date',
valuePrepareFunction: (start_date) => {
return this.datePipe.transform(new Date(start_date), 'MMM dd, yyyy');
}
},
end_date: {
title: 'End date',
valuePrepareFunction: (end_date) => {
return this.datePipe.transform(new Date(end_date), 'MMM dd, yyyy');
}
},
start_time: {
title: 'Start time',
valuePrepareFunction: (start_time) => {
const date = new Date();
var month = date.getUTCMonth() + 1;
var day = date.getUTCDate();
var year = date.getUTCFullYear();
return this.datePipe.transform(new Date(year + '-' + month + '-' + day + ' ' + start_time), 'hh:mm aa');
}
},
end_time: {
title: 'End time',
valuePrepareFunction: (end_time) => {
const date = new Date();
var month = date.getUTCMonth() + 1;
var day = date.getUTCDate();
var year = date.getUTCFullYear();
return this.datePipe.transform(new Date(year + '-' + month + '-' + day + ' ' + end_time), 'hh:mm aa');
}
},
hours_filed: {
title: 'Hours filed',
type: 'number'
},
hours_approved: {
title: 'Hours approved',
type: 'number'
},
is_convert_to_leave: {
title: 'Convert to leave',
valuePrepareFunction: (is_convert_to_leave) => { return is_convert_to_leave == 1 ? 'Yes' : 'No' }
},
is_converted: {
title: 'Converted',
valuePrepareFunction: (is_converted) => { return is_converted == 1 ? 'Yes' : 'No' }
},
hours_filed_to_leave: {
title: 'Hours filed to leave',
type: 'number'
},
leave_type: {
title: 'Leave type',
type: 'string'
},
hours_converted_to_leave: {
title: 'Hours converted to leave',
type: 'number'
},
reason: {
title: 'Reason',
type: 'string'
},
created_by: {
title: 'Created by',
type: 'string'
},
date_created: {
title: 'Date created',
valuePrepareFunction: (date_created) => {
return this.datePipe.transform(new Date(date_created), 'MMM dd, yyyy hh:mm aa');
}
},
approved_by: {
title: 'Approved by',
type: 'string'
},
date_approved: {
title: 'Date Approved',
valuePrepareFunction: (date_approved) => {
return this.datePipe.transform(new Date(date_approved), 'MMM dd, yyyy hh:mm aa');
}
},
modified_by: {
title: 'Modified by',
type: 'string'
},
date_modified: {
title: 'Date modified',
valuePrepareFunction: (date_modified) => {
return this.datePipe.transform(new Date(date_modified), 'MMM dd, yyyy hh:mm aa');
}
}
},
};
source: LocalDataSource = new LocalDataSource();
constructor(private service: OvertimeService,
private windowService: NbWindowService,
private datePipe: DatePipe) {
this.service.getOvertime().subscribe(data => {
this.source.load(data);
});
}
ngOnInit() {
}
openOvertimeForm() {
this.windowService.open(OvertimeFormComponent, { title: `File Overtime` });
}
}