Question

我正在使用angular 4应用程序。
在这里，我有两个组件，一个用于添加功能，另一个用于视图功能。每当我添加新项目时，我都需要刷新视图页面中的内容。我在这里所做的是在添加新项目时调用视图页面中存在的函数。

此函数正在调用，我正在获取新的数据源以用于查看页面。但是这里的问题是，视图页面Html没有更新。即使我更新了数据源，它也没有在列表中显示新项目。

有帮助吗？

谢谢！

**这是一个添加请求组件ts **

`import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../../shared/services/global.service';
import{RequestHistoryComponent}from'./pages/request-history/requesthistory.component';
@Component({
  selector: 'app-create-request-popup',
  templateUrl: './create-request-popup.component.html',
  styleUrls: ['./create-request-popup.component.scss'],
  providers:[RequestHistoryComponent]
})
export class CreateRequestComponent implements OnInit {
  constructor(private _globalService:GlobalService,private ReqHisComp:RequestHistoryComponent) {
    this.AddServiceReq();
  }
  ngOnInit(){}
  RequsetOBJ=[];
  AddServiceReq(){
   this._globalService.postApi("ServiceRequest",this.RequsetOBJ).subscribe(response=>{ 
       console.log(response);
       if(response.Status=="OK"){
        ** // This is the function in another compontent **
        this.ReqHisComp.GetallServicerequests();
       }
   },err=>{
      console.log(err);
    });
  }
}`

这是视图请求组件ts

`import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../../shared/services/global.service';
@Component({
  selector: 'app-request-history',
  templateUrl: './request-history.component.html',
  styleUrls: ['./request-history.component.scss']
})
export class RequestHistoryComponent implements OnInit {
  constructor(private _globalService:GlobalService) {
    this.GetallServicerequests();
  }
  ngOnInit(){}
  MainReqData: any = undefined;
  GetallServicerequests() {
    this.MainReqData=undefined;
    console.log(this.MainReqData);
    this._globalService.getApi("RequestList?CustomerMasterId=" + this.CustomerMasterId + "&AgentMasterId=" + this.AgentMasterId + "&ServiceProviderMasterId=" + this.ServiceProviderMasterId + "&ServiceRequestStatusId=null&ServicePlanId=null").subscribe(response => {
      console.log("GetAllRequest", response);
      if (response.length > 0 && response != undefined) {
        this.MainReqData=response;
      }else{
        this.MainReqData=[];  
      }
    },err=>{
      console.log(err);
    })
  }
}`

Answer 1

（一如既往）有多种方法。

您可以将业务功能（加载数据并使之可用）移至服务中。然后，您的智能组件将触发加载，而“哑”组件（视图组件）将只订阅一个可观察对象，该对象将在值发生更改时发出值。
这样可以将关注点分开的应用程序剪裁得很好。

另一种方法是将数据作为输入（使用@Input（）装饰器）提供给子（视图）组件。并实现了OnChanges-接口（ngOnChanges方法）。只要输入发生更改，它将执行。请注意，如果您有较深的对象/阵列，则可能是角度的变化检测无法实现变化。然后，它有助于为输入提供一个新的引用（按引用复制对象和数组，而按值复制布尔值，字符串等）。

Answer 2

谢谢大家。我在Ts中犯了一个小错误，并修正了该错误。 我的问题已解决。

问题由提供商提供。

如何从另一个组件刷新一个组件，而无需使用Angular4重新加载整个页面

2 个答案: