路由页面后，角度8视图数据未更新

Question

我在角度（8）中有一个问题。我有一个组件，可以上传和删除一些文件。第一次或刷新浏览器（我可以查看数据，删除数据。

数据将正确更新）工作正常。但是当我移动另一页并再次返回上一页时，我删除了一些数据或上传了一些数据，但视图未更新（我从api获取更新的数据，并且我调用的是第一次的相同方法，但此数据未更新。 enter image description here

///路线

const routes: Routes = [
  { path: '', component: DashBoardComponent, children:[
    { path: '', component: ScenariotableComponent},
    { path: 'unconstraint/:ScenarioId', component: mycomponent}   
  ]},


  { path: "**", redirectTo:""}
];

///我的组件/////////

import { Component, OnInit } from "@angular/core";
import { NgbAccordionConfig, NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";
import { ActivatedRoute, Router } from "@angular/router";
import { FileUploadService } from "./../../services/file-upload.service";
import { ScenariosService } from "./../../services/scenarios.service";

@Component({
  selector: "app-unconstraint",
  templateUrl: "./unconstraint.component.html",
  styleUrls: ["./unconstraint.component.less"],
  providers: [NgbAccordionConfig]
})
export class UnconstraintComponent implements OnInit {
  scenarioParamId;
  costA: any;
  piceA: any;
  escalationA: any;
  projectA: any;

  id = parseInt(this.route.snapshot.paramMap.get("ScenarioId"));
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private apiUploadService: FileUploadService,
    private apiService: ScenariosService,
    private modalService: NgbModal
  ) {

  }
  getDeletedId(id) {
    this.currentDeteletSectio = id;
  }

  chekUnConsData() {
    this.apiUploadService.getUnconstraintScenario(this.scenarioParamId)
      .subscribe(
        data => {
          if (data != "No records available") {
            this.costA = data.find(o => o.Template === "cost_assumption");
            this.piceA = data.find(o => o.Template === "price_assumption");
            this.escalationA = data.find(o => o.Template === "escalation_assumption");
            this.projectA = data.find(o => o.Template === "project_assumption");
          } else {
            this.costA = undefined;
            this.piceA = undefined;
            this.escalationA = undefined;
            this.projectA = undefined;            
          }
        },
        err => {
          console.log(err);
        }
      );
  }

  ngOnInit() {
    this.scenarioParamId = this.id;
    this.chekUnConsData();// on init called this function
    if (this.apiUploadService.subsVar == undefined) {
      this.apiUploadService.subsVar = this.apiUploadService.invokeFileUploadComponentFunction.subscribe(
        () => {
          this.chekUnConsData();//this function called by some other component
        }
      );
    }
  }
}

///// HTML

 <div class="wso__upload--row-descriptions">
    <div *ngIf="costA?.Template !== undefined && !costA?.Template.length">
        <app-upload-blob slno="1."
            templateview="Cost Assumption"
            container="temp"
            screen="unconstraint_file_upload"
            template="cost_assumption"
            scenarioId='{{scenarioParamId}}'></app-upload-blob>
    </div>
    <div *ngIf="costA?.Template.length">
        <app-upload-blob-view slno="1."
            templateview="Cost Assumption"
            container="user-data"
            screen="unconstraint_file_upload"
            template="cost_assumption"
            scenarioId='{{scenarioParamId}}'
            jsonBlobPath={{costA.JsonBlobPath}} 
            fileNme='{{costA.Filename}}'
            createdBy='{{costA.CreatedBy}}'></app-upload-blob-view>
    </div>

    <div *ngIf="piceA?.Template !== undefined && !piceA?.Template.length">
        <app-upload-blob slno="2."
            templateview="Price Assumption"
            container="temp"
            screen="unconstraint_file_upload"
            template="price_assumption"
            scenarioId='{{scenarioParamId}}'></app-upload-blob>
    </div>
    <div *ngIf="piceA?.Template.length">
        <app-upload-blob-view slno="2."
            templateview="Price Assumption"
            container="user-data"
            screen="unconstraint_file_upload"
            template="price_assumption"
            scenarioId='{{scenarioParamId}}'
            jsonBlobPath={{piceA.JsonBlobPath}} 
            fileNme='{{piceA.Filename}}'
            createdBy='{{piceA.CreatedBy}}'></app-upload-blob-view>
    </div>

    <div *ngIf="escalationA?.Template !== undefined && !escalationA?.Template.length">
        <app-upload-blob slno="3."
             templateview="Escalation Assumption"
             container="temp"
             screen="unconstraint_file_upload" 
             template="escalation_assumption" 
             scenarioId='{{scenarioParamId}}'></app-upload-blob>
    </div>
    <div *ngIf="escalationA?.Template.length">
        <app-upload-blob-view slno="3."
            templateview="Escalation Assumption"
            container="user-data"
            screen="unconstraint_file_upload"
            template="escalation_assumption" 
            scenarioId='{{scenarioParamId}}'
            jsonBlobPath={{escalationA.JsonBlobPath}}
            fileNme='{{escalationA.Filename}}'
            createdBy='{{escalationA.CreatedBy}}'></app-upload-blob-view>
    </div>
</div>

////////////服务

import { Injectable, EventEmitter } from '@angular/core';
import { Observable, throwError ,Subscription} from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { environment } from '../../environments/environment';
@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  baseUrl: string = environment.baseurl;
  headers = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(private http: HttpClient) {}
  invokeFileUploadComponentFunction = new EventEmitter();
  subsVar: Subscription; 


  uplodadDataCheck() {
    this.invokeFileUploadComponentFunction.emit();    
  } 



  getUnconstraintScenario(id): Observable<any> {
    let url = `${this.baseUrl}api/scenario/getscenariouserdata?`+ environment.template.get+"&screen=unconstraint_file_upload&scenarioid="+id;
    return this.http.get(url, {headers: this.headers}).pipe(
      map((res: Response) => {
        return res || {}
      }),
      catchError(this.errorUplaod)
    )
  }


}

/////////////删除组件

import { Component, OnInit, Input } from '@angular/core';
import { FileUploadService } from './../../../services/file-upload.service';
import { NgbAccordionConfig, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-delete-confirmation',
  templateUrl: './delete-confirmation.component.html',
  styleUrls: ['./delete-confirmation.component.less']
})
export class DeleteConfirmationComponent implements OnInit {
  @Input () errorMessages;

  constructor(
    //public activeModal: NgbActiveModal,
    public modalService: NgbModal,
    private apiUploadService: FileUploadService
    ) {}

  deleteData(e){
    this.modalService.dismissAll();  
    this.apiUploadService.deleteUnconstraintScenario(e).subscribe((data) => {
      console.log(data);  
      this.fileUploadSVC.uplodadDataCheck();

    },(err)=>{
      console.log("err");
    })
  }


  ngOnInit() {
  }

}

////删除组件HTML

<div class="modal-header">
    <p class="wso__confirmpop--header"><i class="icon-warning"></i></p>

</div>
<div class="modal-body">
    <div><p class="wso__confirmpop--content bold--text text-center">Delete</p></div>
    <p class="wso__confirmpop--content">Are you sure to delete the file(s)?</p>
</div>
<div class="modal-footer">

    <button type="button" class="wso__button button__cancel"
            (click)="modalService.dismissAll()">No</button>
    <button type="button" class="wso__button button__active" 
            (click)="deleteData(errorMessages)">Yes</button>
</div>