ngOnchanges未触发

Question

我正在调用companyInfo ( component )，我在公司报告组件(report Component)中调用它，并且我还只在报告页面中显示所有公司名称(为了快速访问，在右侧)。如果我在companyInfo组件中点击quick access ngOnchanges not triggering中的other company，则只有一次在companyInfo组件的初始加载中为companyInfo组件工作。我如何才能检测到每一次点击？

<div id="CompanyInfo" class="ContentControl">
    <app-company-info [isInEdit]="isInEdit"></app-company-info>
</div>

CompanyInfo组件Ts文件

import { Component, OnInit, Input,SimpleChanges  } from '@angular/core';
  export class CompanyInfoComponent implements OnInit {
  @Input()
  isInEdit: boolean;

  constructor(private _reportDataService: ReportDataService) { }
  ngOnInit() {

  }
  ngOnChanges( changes: SimpleChanges ){
      console.log( "CompanyInfoComponent" );
  }
}

Answer 1

在ngOnInit之前以及每当一个或多个数据绑定输入属性发生更改时，都会调用角度生命周期钩子方法ngOnChanges。要实现此功能，您的类必须实现接口OnChanges。在您的示例中，要多次调用该方法，必须在组件初始化后更改isInEdit的值。

在您的CompanyInfoComponent中，您希望显示在其他地方选择的公司的信息。假设所选公司的ID为另一个@Input属性，这是有意义的。每次此ID更改时，您都必须请求相应公司的详细信息。

@Input() companyID: number;

ngOnChanges( changes: SimpleChanges ){
  if (changes['companyID']) {
    // request company information 
  }
}

在模板中，公司ID将传递给组件，如下所示：

<app-company-info [isInEdit]="isInEdit" [companyID]="selectedCompanyID"></app-company-info>