Angular 2の別のデバイスからトリガされた状態の変化

Question

この現象は、私のyeomanジェネレータによって有効にされたBrowsersync機能に起因しています。 見ていただきありがとうございます！

EDIT：このようなテストをいくつか行いましたが、すべての状態がリークするようです。私の質問は、「各デバイスが動作しているAngular 2インスタンスでのみ動作するようにするにはどうすればよいですか？」です。

私は、基本的なサイドパネルメニューを隠して表示するために状態変更を実装しました。状態がトリガーされると、期待どおりにアクションが実行されます。奇妙なのは、私が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> 

Answer 1

これは私が使用された構成を確認せずにBrowsersyncの私の使用によって引き起こされます。私のようなことはしないで、新しいツールを使うときにビルドの設定を確認してください！