Warten auf Element in Angular2 definiert werden

Question

Ich versuche, ein Google-Diagramm in eine PrimeNG tab einzubetten. Ich benutze eine Gabel der Angular 2 Google Chart package. Wenn ich das erste Mal mit dem Diagramm auf die Seite route, funktioniert alles wie erwartet. Allerdings, wenn ich weg, navigieren und kehre ich die folgende Fehlermeldung erhalten:

Error in ./MyChartComponent class MyChartComponent - inline template:1:5 caused by: The container #my_chart is not defined.

Dies ist der gleiche Fehler würde man erhalten, wenn sie ein Diagramm in ein div zu ziehen versuchten, die nicht existierten. Soweit ich das beurteilen kann,

1) es funktioniert das erste Mal, weil es eine Verzögerung gibt, während die Diagramme Bibliothek abgerufen wird, so dass das Element gerendert werden kann. 2) Wenn die Route wieder geöffnet wird, wird eine Sequenz von Ereignissen ausgelöst, die dazu führt, dass die Diagrammbibliothek versucht, den Inhalt von div festzulegen, bevor das div in das DOM aufgenommen wurde.

Die Diagrammkomponenten funktionieren einwandfrei, wenn sie nicht in die PrimeNG-Registerkarten eingebettet sind. Ich vermute, dass die Reihenfolge, in der Ereignisse auftreten, dadurch unterbrochen wurde. Ich fand eine Referenz, die besagt, dass PrimeNG Tabs den Inhalt in <ng-content> setzen. Wenn dadurch eine Art Parent/Child-Beziehung im Lebenszyklus der Komponenten unterbrochen wird, nehme ich an, dass ich auf die Einstellung der @Input auf die Diagrammkomponente warten muss, bis das Diving "my_chart" existiert.

Ich habe die Dokumentation für die verschiedenen Angular Life Cycle Hooks durchgelesen, konnte aber dieses Problem nicht lösen. Irgendwelche Wünsche wären willkommen.

Answer 1

Versuchen Sie, die Entschlossenheit Attribut bei der Einrichtung Ihrer Route mit:

{ 
    path: '', 
    resolve: { chartData: ChartResolver }, 
    component: MyChartComponent 
} 

Dann in Ihrer Komponente ziehen, dass die Daten in:

ngOnInit() { 
    //The 'data' gets loaded into the snapshot by the route resolver 
    this.chartData = this.route.snapshot.data['chartData']; 
    } 

Dann müssen Sie die Resolver-Klasse erstellen:

@Injectable() 
export class ChartResolver implements Resolve<ChartData> { 

    constructor(private http:Http) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ChartData> { 

    //Doesn't have to be a server call, as long as it returns the data 
    return this.http.get("/url-to-chart-info) 
     .map((res:Response) => res.json()); 
    } 
} 

Sie müssen alles korrekt importieren und ich weiß nicht, ob Sie eine Klasse Typoskript für die haben Daten, aber etwas in dieser Richtung sollte funktionieren. Dies sollte die Daten oder etwas anderes, das Sie benötigen, verfügbar machen, bevor die Vorlage gerendert wird.

Hoffentlich hilft das, es beantwortet Ihre Frage nicht vollständig, mehr Teil 2, aber der Resolver ist der beste Weg, um alles vorzubereiten, bevor Sie rendern müssen.