Angular 将回调对象从父组件传递到子组件

我有一个表单组件是父组件，一个显示结果组件是子组件。 我调用了一个api，我必须使用回调来检索数据。 在我的服务层，我拨打电话：

postSearchDocument(response: any, callback): void {
  console.log('Response form in service layer: ', response);

  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('POST', this.appConfig.getConfig().apiUrl + '' + this.appConfig.getConfig().searchDocument, true);

  // build SOAP request
  const soapRequest =
    '<?xml version="1.0" encoding="utf-8"?>' +
    '<soapenv:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
    'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
    'xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" ' +
    'xmlns:bran="http://www.bottomline.com/soap/branch/">' +
    '<soapenv:Header/>' +
    '<soapenv:Body>' +
    '<bran:CallBranch soapenv:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">' +
    '<JSONRequest xsi:type="xsd:string">' +
    JSON.stringify(response) +
    '</JSONRequest>' +
    '</bran:CallBranch>' +
    '</soapenv:Body>' +
    '</soapenv:Envelope>';

  console.log('SOAP REQUEST ');
  console.log(soapRequest.toString());

  xmlhttp.onreadystatechange = () => {
    if (xmlhttp.readyState === 4) {
      if (xmlhttp.status === 200) {
        this.returnValue = xmlhttp.responseText;
        // alert(xmlhttp.responseText);
        console.log('Response : ');
        console.log(xmlhttp.responseText);

        this.documentResponse = JSON.parse(this.returnValue)
      );  
      console.log(this.documentResponse);
      callback.apply(this, [this.documentResponse]);
      // return this.documentResponse;
    }
  }
};

这是我的回电：

getResponse(response): void {
  this.documentsResponse = response;
  console.log('In callback response ', this.documentsResponse);
}

此API调用使用SOAP，我添加了一个回调以从服务器获取响应：

在我的子组件中，我有以下变量：

@Input() documentsResponse;

我的问题是，我没有在子组件中显示来自父级的返回值。我在我的子组件中添加了一个生命周期挂钩来监视更改：

ngOnChanges(changes: SimpleChanges): Promise<any> {
  if (changes.documentsResponse && this.documentsResponse !== null) {
    console.log(this.documentsResponse);
  }
}

ngOnChanges（更改：SimpleChanges）：承诺{
if（changes.documentsResponse&&this.documentsResponse！==null）{
console.log（this.documents响应）；
}
}

当您使用

变更检测策略时。OnPush

变更检测将受到限制，仅适用于某些情况。您需要标记父组件和子组件，以便在下一个周期中进行检查。试试下面的代码

父组件

import { ..., ChangeDetectorRef } from '@angular/core'

@Component({})
class ParentComponent {
  documentResponse: any

  ...

  constructor(
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ...

  getResponse(response) {
    this.documentResponse = response;
    this.changeDetectorRef.markForCheck(); // Here is the fix
  }
}

---

工作

postSearchDocument是什么样子的..？您使用的是什么类型的

changeDetectionStrategy

？在父和子组件中？您是否也可以发布父和子类型脚本代码？要检查确切的问题，我想我使用的是默认的changeDetectionStrategy。。。我没有设置这样的东西。我更新了codeCan，您可以添加@Component（）decorators中的代码

ngOnChanges(changes: SimpleChanges): Promise<any> {
  if (changes.documentsResponse && this.documentsResponse !== null) {
    console.log(this.documentsResponse);
  }
}

import { ..., ChangeDetectorRef } from '@angular/core'

@Component({})
class ParentComponent {
  documentResponse: any

  ...

  constructor(
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ...

  getResponse(response) {
    this.documentResponse = response;
    this.changeDetectorRef.markForCheck(); // Here is the fix
  }
}