ngSrc Funktion unendlich in angular2

Um rief ein YouTube-Film in einem Iframe zu laden, ich habe folgende in meiner Vorlage:ngSrc Funktion unendlich in angular2

<iframe [src]="getYouTubeUrl(currentItem.id)" frameborder="0" allowfullscreen></iframe>

In der Komponente I definiert haben:

getYouTubeUrl(id:string):SafeResourceUrl { 
    let url:string = `https://www.youtube.com/embed/${id}`; 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
}

Irgendwie , diese Funktion wird unendlich aufgerufen (während sich die resultierende URL nicht ändert). Das Ergebnis ist, dass das Video nicht geladen werden kann. Was könnte hier falsch sein?

Quelle

2016-10-03 dndr

Verwenden statt reinem Rohr. Siehe auch http://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsaf-value-exception/38037914#38037914 und Ausgabe auf github https://github.com/angular/angular/issues/11518 – yurzui

Danke, das funktioniert! :) Ich weiß nicht, warum Change Detection mehrfach ohne Pipe ausgeführt wird, aber nur einmal mit der Pipe? Könnte es sein, weil die Funktion jetzt eine Zeichenfolge (die URL) zurückgibt, die ein Primitiv ist, und keine SafeResourceUrl, die kein Primitiv ist? – dndr

Pure Pipe wird nur ausgeführt, wenn eine reine Änderung des Eingabewerts festgestellt wird. Auf der anderen Seite ruft Ihre Funktion innerhalb der Vorlage alle 'Application.tick' http://stackoverflow.com/questions/39757603/unraveling-angular-2-book-chapter-1-example-5/39761822#39761822 – yurzui

Angulars Change Detection ruft die Methode jedes Mal auf, wenn die Änderungserkennung ausgeführt wird, was normalerweise ziemlich oft der Fall ist. Aus diesem Grund wird davon abgeraten, an Funktionen oder Methoden zu binden.

Weisen Sie stattdessen das Ergebnis der Funktion oder Methode einer Eigenschaft zu und binden Sie stattdessen diese Eigenschaft aus der Ansicht.

<iframe [src]="youTubeUrl" frameborder="0" allowfullscreen></iframe>

ngOnInit() { 
    this.youTubeUrl = getYouTubeUrl(this.currentItem.id); 
}

Quelle

2016-10-03 14:21:02

Was ist, wenn Ich verwende einen Repeater (ngFor) auf einer Liste von Bildern mit einer Funktion für die [src]? – alex351

Das Gleiche. Binde Funktionen nicht ein. Bereiten Sie ein neues Array vor, das das Ergebnis für jedes Objekt enthält (oder fügen Sie die Daten der "Liste der Bilder" hinzu), und binden Sie dann an dieses Array. –

Guter Anruf, danke. – alex351

ngSrc Funktion unendlich in angular2

Antwort

Verwandte Themen