使用Angular 2从独立设备触发的状态更改

此行为已归因于由我的yeoman生成器启用的Browsersync功能。 感谢您的期待！使用Angular 2从独立设备触发的状态更改

编辑：我做了一些像这样的更多的测试，它似乎所有的状态更改泄漏。我的问题是现在“我如何确保每个设备只对其运行的Angular 2实例起作用？”

我已经实现了状态更改来隐藏和显示基本的侧面面板菜单。当状态被触发时，按预期执行操作。当我在两台设备上同时运行应用程序时，会出现奇怪的现象。

在我的桌面和手机上打开应用程序后，按下按钮切换菜单切换不仅在我与之交互的设备上切换，还切换到其他连接的设备。由于面板不同步他们的状态，这似乎是一个触发问题。

Tl; dr打开手机上的菜单，如果桌面已经打开，它将在桌面上关闭。打开电话菜单，如果关闭，桌面菜单将打开。这不应该发生。

如何防止状态变化像这样泄漏？

sidepanel.ts

import {Component, Input, Output, EventEmitter, trigger, state, style, transition, animate} from '@angular/core'; 
import {Session} from '../services/session'; 

@Component({ 
    selector: 'sidepanel', 
    template: require('./sidepanel.html'), 
    styles: [ String(require('./sidepanel.scss')) ], 
    animations: [ 
    trigger('panelWidthTrigger', [ 
     state('expanded', style({ left: '0' })), 
     state('collapsed', style({ left: '-218px' })), 
     transition('collapsed => expanded', animate('200ms ease-in')), 
     transition('expanded => collapsed', animate('200ms 200ms ease-out')) 
    ])] 
    }) 
    export class Sidepanel { 
    @Input() sessions: Session[]; 
    @Output('select') select = new EventEmitter(); 
    expanded = false; 
    expandedState = 'expanded'; 

    constructor() { 
    } 

    newSession() { 
     this.select.emit(new Session); 
    } 

    displaySession(session: Session) { 
     this.select.emit(session); 
    } 

    toggleExpandedState() { 
     this.expandedState = this.expanded ? 'collapsed' : 'expanded'; 
     this.expanded = !this.expanded; 
    } 

    }

sidepanel.html

<div class="side-panel" @panelWidthTrigger="expandedState"> 
    <div class="session-list-header"> 
    <h2>All Sessions<button (click)="toggleExpandedState()" class="session-list-button" ><span>&#9776;</span></button></h2> 
    </div> 
    <ul> 
    <li class="session-list-item" *ngFor="let session of sessions" (click)="displaySession(session)"><label class="session-list-item-title">{{session.name}}</label></li> 
    <li class="session-list-item session-list-new" (click)="newSession()"><label class="session-list-item-title">New Session</label></li> 
    </ul> 
</div>

来源

2016-08-19 gelliott181

作为一个说明，我使用Gulp，Webpack和Browsersync来构建。我用一个yeoman生成器来支持包含这些包的默认配置的基本应用程序。 – gelliott181

这是一项浏览器同步功能，与Angular AFAIK无关。 –

我只是在阅读关于Browsersync鬼影作为一个可能的原因。感谢您的确认！ – gelliott181

这是我的使用Browsersync的不检查我使用的配置引起的。不要和我一样，在使用新工具时检查你的构建配置！

来源

2016-08-19 14:23:53 gelliott181

使用Angular 2从独立设备触发的状态更改

回答

相关问题