У меня есть компонент A, из которого выскакивает компонент B. Компонент A отображает и фильтрует всех игроков в списке, а компонент B используется для добавления игрока в список. После добавления плеера в компоненте BI необходимо обновить мой список по компоненту A. Для отображения списка компонентов AI записали логи c в его OnInit(). Как я должен refre sh это. Я не использую маршруты.
Это компонент A ts file
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
providers : [ServiceForPlayersService]
})
export class HomeComponent implements OnInit, OnChanges{
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
searchKey : String;
playerList : playerData[] = [];
playerListForSearch : playerData[] = [];
tableData : MatTableDataSource<any>;
displayedColumns = ['Player', 'Tm', 'season17_18', "actions"];
data: Array<any> = [{
n: Number,
ok: Number,
deletedCount : Number
}];
constructor(private service : ServiceForPlayersService,
private dialog : MatDialog) { }
ngOnInit() {
this.getplayersList();
}
getplayersList(){
this.service.getPlayers().subscribe(players=>{
this.playerList = players;
this.tableData = new MatTableDataSource(this.playerList);
this.tableData.sort = this.sort;
this.tableData.paginator = this.paginator;
});
}
onSeachClear(){
this.searchKey = "";
this.applyFilter();
}
onCreateClick(){
//now we need to config our dialog form, for that...
const dialogConfig = new MatDialogConfig();
//when clicked anywhere except the dialog box it will close automatically
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = "40%";
this.dialog.open(AddplayerComponent, dialogConfig);
}
}
Компонент A html
<div class = "container-fluid">
<button mat-raised-button class = "addplayer" color = "accent" (click) = "onCreateClick()">
<mat-icon>add</mat-icon>
</button>
<mat-form-field appearance = "standard" color = "accent" class = "searchcontainer" >
<mat-label>Search Players</mat-label>
<input class ="search-content" matInput [(ngModel)] = "searchKey" name = "searchKey" (keyup) = "applyFilter()">
<button mat-button *ngIf="searchKey" matSuffix mat-icon-button arial-label = "Clear" (click)= "onSeachClear()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
<div class = "container-fluid">
<table mat-table [dataSource] = "tableData" class = "lessons-table mat-elevation-z8" matSort matSortActive="season17_18" matSortDirection="desc" matSortDisableClear>
<ng-container matColumnDef = "Player">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name of the Player</th>
<td mat-cell *matCellDef="let row"> {{row.Player}}</td>
</ng-container>
<ng-container matColumnDef = "Tm">
<th mat-header-cell *matHeaderCellDef mat-sort-header >Team</th>
<td mat-cell *matCellDef="let row"> {{row.Tm}}</td>
</ng-container>
<ng-container matColumnDef = "season17_18">
<th mat-header-cell *matHeaderCellDef mat-sort-header >Salary</th>
<td mat-cell *matCellDef="let row" > {{row.season17_18}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef ></th>
<td mat-cell *matCellDef="let row">
<button mat-icon-button (click) = "update(row)"><mat-icon color = "accent" >launch</mat-icon></button>
<button mat-icon-button (click) = "delete(row._id)"><mat-icon color = "accent">delete_outline</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row color = "accent" *matHeaderRowDef= "displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions] = "[5,10,25,100]" [pageSize] = "5"></mat-paginator>
</div>
Компонент B TS
@Component({
selector: 'app-addplayer',
templateUrl: './addplayer.component.html',
styleUrls: ['./addplayer.component.scss'],
providers : [ServiceForPlayersService]
})
export class AddplayerComponent implements OnInit {
// homeComponentObject = new HomeComponent();
isAdded: boolean = false;
confirmation_msg = "Player added successfully!";
constructor(private service : ServiceForPlayersService,
private dialogref : MatDialogRef<AddplayerComponent>) { }
ngOnInit() {
}
addplayerform = new FormGroup({
Player: new FormControl(''),
Tm: new FormControl(''),
season17_18: new FormControl('')
});
onSubmitaddplayer(form){
console.warn(this.addplayerform.value);
let newPlayerInfo : playerData = {
_id : uuid.v4(),
Player : form.value.Player,
Tm : form.value.Tm,
season17_18 : form.value.season17_18
}
this.service.createPlayer(newPlayerInfo);
this.isAdded = true;
this.dialogref.close();
//here again i have to reload component A that is call method ngoninit
}
Компонент B Html
<mat-toolbar>
<h4>Add Player Info</h4>
<button mat-button matsuffix color = "accent" mat-icon-button arial-label = "Clear" (click) = "clear()">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar>
<div class="conainer">
<h4 *ngIf = "isAdded">{{confirmation_msg}}</h4>
</div>
<br>
<form #frm="ngForm" [formGroup] = "addplayerform" (ngSubmit)="onSubmitaddplayer(frm)" >
<div class="addplayercontainer">
<mat-form-field class = "form-control">
<label for = "Player">Player Name :</label>
<input pattern = "[a-zA-Z][a-zA-Z_ ]+" matInput formControlName = "Player" required>
</mat-form-field>
<br><br>
<mat-form-field class = "form-control">
<label for = "team">Team :</label>
<input matInput pattern = "[a-zA-Z]{3}" formControlName = "Tm" required>
</mat-form-field>
<br><br>
<mat-form-field class = "form-control">
<label for = "salary">Salary :</label>
<input matInput pattern = "[0-9]*" formControlName = "season17_18" required>
</mat-form-field>
<br>
</div>
<button mat-raised-button color = "accent" [disabled] = "!addplayerform.valid">
Add Player
</button>
</form>