Question

我正在尝试从父组件向子组件发送数据，但是我的ng2-smart-table面临着一个问题。在我的父组件中，我使用ng2-smart-table，它使用userRowSelect（标准函数），当我在表中选择一行时，我从该行获取所有数据。我想要传递给我的子组件的那一行的数据。我尝试使用共享服务，输入和发射，到目前为止他们都没有工作。以下是这两个组件的代码片段。关于该怎么做的任何建议？

父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')]);
  }

Angular4将数据从父级传递给子级，发出不起作用

1 个答案: