2016-04-21 7 views
10

Dies ist eine Angular2 App und die Komponente vereinfacht wird hier als:Für Angular2, warum beeinflussen sich zwei Seiten (zwei Registerkarten) mit derselben Komponente gegenseitig?

@Component({ 
    selector: 'courses', 
    template: ` 
     <input [(ngModel)]="wahla"> 
     <input [(ngModel)]="wahla"> 
     {{ wahla }} 
     ` 
}) 
export class CoursesComponent { 
    wahla = "hmm hmm ha ha"; 
} 

ich denke, die App auf einer Seite mit dem Zwei-Wege-Bindung, funktioniert gut, aber wenn ich öffnen Sie ein anderes Register mit http://localhost:3000/ und dann Fügen Sie etwas ein oder geben Sie etwas in das erste Eingabefeld der ersten Seite ein, dann wird das zweite Register für das erste Eingabefeld aktualisiert, während das zweite Eingabefeld und der statische Text nicht aktualisiert werden.

Für die erste Registerkarte wird alles wie erwartet aktualisiert.

Soll das passieren oder was könnte falsch sein? Dies wird unter Verwendung von npm start ausgeführt, auf dem ein Lite-Server mit BrowserSync ausgeführt wird.

+1

Dies geschieht sogar im Falle eines anderen Browsers auf einem anderen PC in einem Netzwerk. jede Vermeidung dieser seltsamen Eigenschaft? – HydTechie

+0

@HydTechie siehe Garys Antwort: http://StackOverflow.com/a/39465216/3010553 –

Antwort

10

Das ist eine Funktionalität von lite-server und kein Bug oder etwas, wie es scheinen könnte.

Um dies zu ermöglichen lite-serveruses eine Javascript-Erweiterung.

Auf lite-server ‚s npm Seite ist es wie dieser ist eine einfache maßgeschneiderte Wrapper um BrowserSync

lite-Server

erwähnt es einfach zu bedienen SPAs zu machen.

und BrowserSync legt sie auf ihre website wie diese

Zeitsparend synchronisierten Browser-Test

und dies löscht alle Wolken des Zweifels

Mit jedem Web Seite, Gerät und Browser, Testzeit wächst exponentiell. Von Live-Reloads zu URL Pushing, form replication bis klicken Sie auf Spiegelung, Browsersync schneidet sich wiederholende manuelle Aufgaben.

+0

Tab 1 zeigt jedoch alle synchronisierten Werte, aber Tab 2 zeigt nur den Wert von Eingabefeld 1 und Eingabefeld 2 und den statischen Text stimmt nicht mit dem Wert in Eingabefeld 1 überein? –

+0

Das liegt wahrscheinlich daran, dass, was auch immer 'BroswerSync' macht, außerhalb des Geltungsbereiches von" eckig "oder spezifischer" zone.js "Winkelzone liegt. Die Änderungen werden also direkt im 'DOM' vorgenommen, das keine 'Änderungserkennung' in eckigen, also inkonsistenten Werten auslöst. –

+0

können Sie es auch reproduzieren? Dann halte ich es für einen Fehler, entweder für Angular2 oder für BrowserSync, weil angeblich alle 3 Werte identisch sein sollten (alle durch 2-Wege-Bindung gebunden) –

5

Sie können die Synchronisierungseinstellungen ändern, indem Sie http://localhost:3001 aufrufen. Dies ist die Benutzeroberfläche zum Ändern der Browser-Synchronisierungseinstellungen. Sobald Sie http://localhost:3001 geladen haben, können Sie zu "Sync-Optionen" navigieren und die Einstellungen für "Browser-Sync" hier ändern.

Verwandte Themen