Angular4 Übergabe von Daten von Eltern zu Kind, emittieren funktioniert nicht

Question

Ich versuche, Daten von der übergeordneten Komponente an die untergeordnete Komponente zu emittieren, aber ich habe ein Problem mit meiner ng2-Smart-Tabelle, die im Weg ist ausstrahlend. In meiner Elternkomponente nutze ich die ng2-smart-table, die userRowSelect (eine Standardfunktion) verwendet, wenn ich eine Zeile in der Tabelle auswähle, bekomme ich alle Daten aus dieser Zeile. Die Daten aus dieser Zeile, die ich an meine untergeordnete Komponente übergeben möchte. Ich habe versucht, einen geteilten Service zu nutzen, zu senden und zu senden, keiner von ihnen hat bisher funktioniert. Unten sind Codeschnipsel der zwei Komponenten. Irgendwelche Vorschläge, was zu tun ist?

Eltern html:

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

Geordnete Komponente:

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

Kinder Komponente:

@Input() template; 

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

Answer 1

Das liegt daran, winkelförmigen Stangen EventEmitter hat emit Methode Wert zu emittieren. Schauen Sie sich docs

Es sollte

sein

this.passDataToViewPdf.emit(event); 

jedoch in Ihrem Code suchen EventEmitter in übergeordnete Komponente definiert ist, so dass Ihre Stammkomponente wird Wert emittiert, um es Eltern nicht auf das Kind.

Es sollte so aussehen.

Kinderkomponente

@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} 

Eltern HTML-Vorlage

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

Geordnete Komponente ts

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