Angular将数据从父母传递给孩子，发出不工作

Question

我正在尝试将数据从父组件发送到子组件，但是我的 ng2-smart-table 存在发送方式的问题。在我的父组件中，我使用了使用 userRowSelect（标准函数）的 ng2-smart-table，当我在表中选择一行时，我会从该行获取所有数据。我想传递给我的子组件的那一行的数据。我尝试使用共享服务、输入和发射，到目前为止它们都没有工作。下面是这两个组件的代码 sn-ps。有什么建议吗？

父 html：

<ng2-smart-table [settings]="settings" [source]="data" (userRowSelect)="onRowSelect($event)"></ng2-smart-table>

父组件：

@Output() passDataToViewPdf: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
      this.reportService.getReportsTemplates().subscribe(response => this.data = response);
  }

  onRowSelect(event): void {
      this.passDataToViewPdf.next(event);
      this.router.navigate(['/report-view-pdf', localStorage.getItem('siteId')]);
  }

子组件：

    @Input() template;

    public handleEvent(event) {
            // get data from passDataToViewPdf emitter
        }
    ngOnInit() { this.template = // get data from handleEvent}

Answer 1

那是因为 Angulars EventEmitter 有 emit 方法来发出值。看docs

应该是

this.passDataToViewPdf.emit(event);

但是查看您的代码 EventEmitter 是在父组件中定义的，因此您的父组件正在向其父组件而不是子组件发送值。

它应该看起来像这样。

子组件

@Input() template;
@Input() set pdf(newPdf) {
   this._pdf = newPdf;
   this.handleEvent(newPdf);
};
private _pdf;



public handleEvent(event) {
    // process your data
}
ngOnInit() { this.template = // get data from handleEvent}

父 html 模板

<child-component [pdf]="pdfValueInParent"></child-component>

父组件ts

onRowSelect(event): void {
      this.pdfValueInParent = event;
      this.router.navigate(['/report-view-pdf', localStorage.getItem('siteId')]);
  }