对于Angular2,为什么具有相同组件的两个页面(两个选项卡)会相互影响？

Question

这是一个Angular2应用程序,该组件在这里简化为:

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

我认为应用程序在一个页面中使用双向绑定工作正常,但是如果我用http:// localhost:3000 /打开另一个选项卡然后在第一页的第一个输入框中粘贴或键入内容,那么第二个tab实际上为其第一个输入框更新,而第二个输入框和静态文本不更新.

对于第一个选项卡,所有内容都按预期更新.

这应该发生还是可能出错？这正在运行使用npm startBrowserSync运行lite-server.

Answer 1

这是一个功能,lite-server而不是一个错误或其他东西,因为它可能看起来像一个.

要实现这一点,请lite-server 使用 javascript扩展Browsersync.

在lite-servernpm页面上,就像这样提到了

lite-server是一个围绕BrowserSync的简单自定义包装器,可以轻松地为SPA提供服务.

并BrowserSync把它放在自己的网站上这样

节省时间的同步浏览器测试

这清除了所有怀疑的阴云

随着每个网页,设备和浏览器,测试时间呈指数级增长.从实时重新加载到URL推送,form replication再到点击镜像,Browsersync会删除重复的手动任务.

Answer 2

您可以通过访问http:// localhost:3001来更改同步设置.这是更改浏览器同步设置的用户界面.加载http:// localhost:3001后,您可以导航到"同步选项"并在此处更改"浏览器同步"的设置.