Для 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, на котором работает облегченный сервер с BrowserSync.


person nonopolarity    schedule 21.04.2016    source источник
comment
Это происходит даже в случае другого браузера на другом ПК в сети. любое избегание этой странной функции?   -  person HydTechie    schedule 04.01.2017
comment
@HydTechie см. ответ Гэри: stackoverflow.com/a/39465216/3010553   -  person Rui Pimentel    schedule 26.01.2017


Ответы (2)


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

Для этого lite-server использует расширение javascript Синхронизация браузера.

На странице lite-server npm это упоминается так:

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

и BrowserSync размещает его на своем веб-сайте вот так

Экономящее время синхронизированное тестирование браузера

и это очищает все тучи сомнений

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

person Ankit Singh    schedule 21.04.2016
comment
однако на первой вкладке отображаются все синхронизированные значения, а на второй вкладке показано только измененное значение поля ввода 1 и поле ввода 2, а также статический текст, несовместимый со значением в поле ввода 1? - person nonopolarity; 21.04.2016
comment
это, вероятно, потому, что все, что делает BroswerSync, выходит за рамки angular или, точнее, zone.js' угловой зоны. Таким образом, изменения вносятся непосредственно в DOM, который не вызывает change detection в angular, следовательно, несовместимые значения. - person Ankit Singh; 21.04.2016
comment
у вас тоже получится воспроизвести? Тогда я считаю это своего рода ошибкой либо для Angular2, либо для BrowserSync, потому что предположительно все 3 значения должны быть идентичными (все связаны двусторонней привязкой) - person nonopolarity; 21.04.2016
comment
да! , я думаю, что он просто еще не поддерживается BrowserSync, вы можете сообщить об ошибке в их репозитории github . - person Ankit Singh; 21.04.2016

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

person Gary    schedule 13.09.2016