Для Angular2, почему две страницы (две вкладки), имеющие один и тот же компонент, влияют друг на друга?

Это приложение Angular2, и этот компонент упрощается здесь:

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

Я думаю, что приложение прекрасно работает на одной странице с двусторонней привязкой, но если я открою еще одну вкладку с http://localhost:3000/, а затем вставьте что-то или введите что-то в первом поле ввода первой страницы, тогда вторая вкладка фактически обновляется для своего первого окна ввода, а второй ящик ввода и статический текст не обновляются.

Для первой вкладки все обновляется, как ожидалось.

Предполагается, что это произойдет или что может быть неправильным? Это выполняется с помощью npm start, на котором запущен Lite-сервер с BrowserSync.

Ответы

Ответ 1

Это функциональность lite-server, а не ошибка или что-то такое, что может показаться одним.

Чтобы это произошло lite-server использует расширение javascript Browsersync.

На странице lite-server npm это указано как

lite-server - это простая настраиваемая оболочка вокруг BrowserSync, чтобы сделать он легко обслуживает SPA.

и BrowserSync помещает его на свой сайт, как этот

Время синхронизации синхронизированного тестирования браузера

и это очищает все облака сомнения

С каждой веб-страницей, устройством и браузером время тестирования увеличивается экспоненциально. От живой перезагрузки до нажатия URL, form replication, чтобы зеркалирование кликов, Browsersync вырезает повторяющиеся ручные задачи.

Ответ 2

Вы можете изменить настройки синхронизации, посетив http://localhost:3001. Это пользовательский интерфейс для изменения настроек синхронизации браузера. Когда вы загрузите http://localhost:3001, вы можете перейти к "Параметры синхронизации" и изменить здесь настройки "Браузер-Синхронизация".