Angular，如何在click事件中从另一个组件重新加载给定Id的数据

Question

我正在开发Angular2应用程序，我有一个组件，它通过按钮点击事件加载一些响应。该组件通过Web API调用拥有自己的数据加载响应。在这个模板的最后，我正在加载问题。现在我的问题是如何使用每个loadNextResponse（）和loadPreviousResponse（）点击事件重新加载这个???

问题列表由响应ID绑定，我在loadNextResponse（）和loadPreviousResponse（）点击事件中获取。

响应模板

<div *ngIf='responseData'>
    <div *ngFor="let response of responses" class="form-row">
       {{response.responseId}}
    </div>

    <div>
        <h1><span>response  </span>{{currentResponse.responseId}}</h1> 

        <button class="btn btn-default width-50 mb-xs" id = "{{currentResponseIndex}}" (click)="loadNextResponse(currentResponseIndex)">Load Next Response</button>
        <button class="btn btn-default width-50 mb-xs" id = "{{currentResponseIndex}}" (click)="loadPreviousResponse(currentResponseIndex)">Load Previous Response</button>
    </div>  

</div>

  <div>       
      <questionsDetailList></questionsDetailList>       
      <!-- <questionsDetailList [responseId]="currentResponse.responseId" ></questionsDetailList>-->
  </div> 

组件

@Component({
  selector: 'new-response-questions',
  templateUrl: './new-response-question.template.html',
})

export class NewResponseComponent implements OnInit {

 public loadData():void
 {
      //load data from Web Api
 }

  public loadNextResponse(responseIndex: string):void
 {
        //load next response
 }

  public loadPreviousResponse(responseIndex: string):void
 {
        // load previous response
 }

}

问题组件

 @Component({
  selector: 'questionsDetailList',
  templateUrl: './question.template.html',
 })

@Input() responseId:string;  ??????????

export class QuestionsComponent implements OnInit {

ngOnInit(): void {
     this.view = new BehaviorSubject<QuestionsDataModel>(null);
     this.loadData();
 }

 public loadData():void
 {
   //load questions from web api //
 }
}

Answer 1

将 ngOnChange（）添加到 questionsDetailList 组件，如下所示：

 @Component({
  selector: 'questionsDetailList',
  templateUrl: './question.template.html',
 })

@Input() responseId:string;  ??????????

export class QuestionsComponent implements OnInit,OnChanges  {

//This function will fire when this.responseId get change
ngOnChanges() {
     this.loadData();
}

ngOnInit(): void {
     this.view = new BehaviorSubject<QuestionsDataModel>(null);
     this.loadData();
 }

 public loadData():void
 {
   //load questions from web api //
 }
}

然后使用如下所示的组件

<questionsDetailList [responseId]="requestId"></questionsDetailList>

之后你只需要更改 requestId 的值，一旦它的值发生变化， questionsDetailList ngOnChanges（）函数>组件将加载。