Ich arbeite an einer Angular 2-Anwendung, die über einen iframe auf anderen Websites geliefert wird. Während des Tests habe ich festgestellt, dass beim Laden der Anwendung die App Component ngOnInit() Funktion zweimal aufgerufen wird.Angular 2 App Komponente ngOnInit zweimal aufgerufen, wenn iframe verwendet
Ich finde das komisch, weil, wenn ich die Anwendung 'für sich selbst' teste, d. H. Nicht ein iframe die App-Komponente ngOnInit() wird nur einmal aufgerufen.
Nach this answer kann dies aufgrund von Fehlern in untergeordneten Komponenten passieren. Aber in meinem Fall habe ich nicht das Problem, wenn ich die Anwendung 'normal' ausführe.
Beispielcode:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>My App!</h1>`
})
export class AppComponent implements OnInit {
constructor() {
console.log('App Component constructor()');
}
ngOnInit() {
console.log('App Component ngOnInit()');
}
}
Iframe Test:
<!DOCTYPE html>
<html>
<body>
<h1>My Test Page</h1>
<!-- iframe accessing my-app component -->
<iframe id="test-iframe" src="/#/" width="100%" height="1300px"></iframe>
</body>
</html>
Ich habe die Anwendung mit nur einem AppComponent getestet, um sicherzustellen, dass keine untergeordneten Komponenten keine Probleme verursachen.
Konsolenausgabe:
Ich denke, dass dieses Verhalten ziemlich normal ist, weil Iframe Verhalten wie Browser und Dokument neu erstellen daher Ihre Komponente neu initiieren. –
Okay, aber wenn Sie eine Seite mit einem Iframe haben, der die Angular App anzeigt, sollte genau wie der Iframe-Test, den ich oben gezeigt habe, die 'AppComponent' nicht einmal ausgelöst werden? Wenn ich die 'my-app' Komponente an zwei Stellen anzeigen würde, würde ich es verstehen. –
Haben Sie src mit ABS-Pfad wie