Warum beeinflussen sich bei Angular2 zwei Seiten (zwei Registerkarten) mit derselben Komponente gegenseitig?

Dies ist eine Angular2-App und die Komponente wird hier vereinfacht als:

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

Ich denke, die App funktioniert auf einer Seite mit der bidirektionalen Bindung einwandfrei, aber wenn ich einen anderen Tab mit @ öffhttp: // localhost: 3000 / und fügen Sie dann etwas in das erste Eingabefeld der ersten Seite ein oder geben Sie etwas ein. Anschließend wird das zweite Register für das erste Eingabefeld aktualisiert, während das zweite Eingabefeld und der statische Text nicht aktualisiert werden.

Bei der ersten Registerkarte wird alles wie erwartet aktualisiert.

Ist das möglich oder was könnte falsch sein? Dies läuft mitnpm start auf dem ein Lite-Server mit BrowserSync läuft.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage