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

问题描述 投票:0回答:2

我有组件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>

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

Component 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>
angular angular-material
2个回答
0
投票
Can you please provide me a different solution as my component B pops up from 
Component A

This is component 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);

  }
}

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

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


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


0
投票

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

  1. Component 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);
   }
}
  1. Component 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();
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.