从 angular8 中的另一个组件再次调用组件的 ngOnInit 中的逻辑

Question

我有组件 A，组件 B 从中弹出。组件 A 显示和筛选列表中的所有玩家，组件 B 用于将玩家添加到列表中。在组件 B 中添加播放器后，我希望刷新组件 A 上的列表。为了显示组件 A 的列表，我在其OnInit()中编写了逻辑。我应该如何刷新它。我没有使用路线。

这是组件 A ts 文件

@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 网页

<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>

Answer 1

这是为MatDialogRef量身定做的..使用dialogConfig.data

1. 组件 A TS

export class ComponentA implements OnInit 
{
public ngOnInit() 
{       
//ngOnInit logic you have    
}
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%";
dialogConfig.data = { 
OnAddNewPlayerAdded: this.ngOnInit;
}
this.dialog.open(AddplayerComponent, dialogConfig);
}
}

<醇开始>

组件 B TS

export class AddplayerComponent {
public OnAddNewPlayerAdded: Function;
constructor(private service : ServiceForPlayersService,
private dialogRef: MatDialogRef<AddplayerComponent>,
@Inject(MAT_DIALOG_DATA) data)) { 
this.OnAddNewPlayerAdded = data.OnAddNewPlayerAdded;
}
public AddNewPlayer() {
//ComponentB logic
this.OnAddNewPlayerAdded();
}
}