Question

我有一个带有按钮的Angular组件，这些按钮可以执行操作并修改数据绑定的输入属性。

组件初始化时，我想在ngOnInit中进行一次http get调用，然后呈现结果。

但是，当用户随后单击修改一些数据绑定输入属性的按钮时，我想重新渲染组件/模板/视图，但是在那种情况下，我不想创建http get呼叫。我只想在第一次打开组件时或在提交组件中的表单之后进行http get调用。

从概念上讲，我的目标是：

details.component.ts

ngOnInit() {

data: Object;

if (certainUserButtonsWereClicked) {
   renderView();
} else {
   makeHttpGetCall.subscribe(data=>{this.data=data;renderView()});
}

我要检查哪些条件才能确定certainUserButtonsWereClicked的值？我是否需要使用ngOnChanges并检查SimpleChanges对象以查看是否进行了更改和/或进行了哪种类型的更改，或者是否有更简便/更好的方法？

Answer 1

您应该尝试使用angular的服务功能并使用service获得api调用，并在html页中创建一个与componet.ts文件绑定的click事件，然后在click event中使用service进行api调用，然后返回到您所在的组件订阅该api数据。并将该组件的功能作为此（功能名称）放在ngOnInit中。因此，当您单击按钮或打开该页面时，始终会调用ngOnInit函数，并根据需要获取适当的数据，希望它将对您有所帮助。

Answer 2

现在我真的很困惑。下面的代码实际上不适用于我的窗体，因为我的组件没有任何数据绑定的Input属性。我不确定是否应该“人为”添加数据绑定的Input属性以触发ngOnChanges？我回到了第一广场，将不得不重新提交我的问题。。。

=====

首先，很抱歉没有更清楚地表达我的问题。经过进一步的研究，我认为要做我想做的唯一方法是使用OnChanges，但是好消息是这并没有像我最初预期的那样介入。实际上，这很容易。这就是我实现代码的方式：

details.component.ts

export class DetailsComponent implements OnInit, OnChanges  {
doGet: boolean = true;
data: any[] = [];

 ngOnChanges(chg: SimpleChanges){
    if (chg.doGet.previousValue === false) {

// When user clicks button, "doGet" property is set to false in the (click) event 
// handler. On re-rendering, it's initialized to "true", so we need
// to reference the previous value, and set it back to "false"

   this.doGet = false;  

// We also need to re-set our key data to the updated version of the old data
// rather than re-fetching the data using HTTP GET

   this.data = chg.data.previousValue;  

   }

 }

  ngOnInit() {
    if (this.doGet) {
      this.member.getDetailsForm(this.userID).subscribe((data)=>{  // Perform HTTP GET
        this.data = data;
        this.renderDataArray();
      })
    } else this.renderDataArray();

如何在ngOnInit中有条件地进行http调用

2 个答案: