TypeError：无法读取未定义的属性“ settDate”

Question

在单击事件中，我试图将数据从Angular中的一个组件传递到另一个组件，而我的组件如下所示

父组件

@Component({
  selector: 'app-reporting-filter',
  templateUrl: './reporting-filter.component.html',
  styleUrls: ['./reporting-filter.component.scss'],
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent implements DoCheck {

  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;

  finalResult: ShipDateFilterModel[];

  click() {
    this.elem = this.getResultOnFilter(this.firstSelection, this.secondSelection);
      this.tjl.settDate(this.finalResult);
  }
   ........}

子组件就像

Component({
  selector: 'app-tjl-shipdate-filter',
  providers: [ProjectShipmentService],
  templateUrl: './tjl-shipdate-filter.component.html',
  styleUrls: ['./tjl-shipdate-filter.component.scss']
})
export class TjlShipdateFilterComponent implements DoCheck {
 tljShipDate: ShipDateFilterModel[];
  @Input() settDate(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }
......}

reporting-filter.component.html

      <dxi-item  [ratio]="1">
              <dx-button (onClick)="click()" style="padding: 1vw 3vw 1.5vw 3vw; text-align: center; font-weight: bold;">Filter</dx-button>
      </dxi-item>

但是当单击按钮和'this.tjl.settDate（this.finalResult）;'时在父组件中执行。我得到了：

  

TypeError：无法读取未定义的属性'settDate'

不确定我们是否在这里丢失了任何东西

Answer 1

您可以传递数据并绑定到Input setter而不是在子组件上调用方法。您需要在set和Data之间添加一个空格

 @Input() set Data(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }

然后在父组件中要创建一个可以向下传递的变量，例如

@Component({
  selector: 'app-reporting-filter',
  template: ` 
              <button (click)="click()">Click Me</button>
              <app-tjl-shipdate-filter [data]="tjlData" ></app-tjl-shipdate-filter>
  `,
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent {
  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;
  private tjlData: any
  click() {
    this.tjlData = 'example data to pass'
  }
}

您可以在这里找到有效的堆叠闪电战：https://stackblitz.com/edit/angular-r24zqd