Question

此行为归因于我的yeoman生成器启用的浏览器同步功能。 谢谢你的期待！

编辑：我做了更多这样的测试，似乎所有状态变化都泄漏了。我现在的问题是＆＃34;我如何确保每个设备只对它运行的Angular 2实例起作用？＆＃34;

我已实施状态更改以隐藏并显示基本的侧面板菜单。触发状态时，将按预期执行操作。当我在两个设备上同时运行应用程序时，会出现这种奇怪现象。

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

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而没有检查我使用的配置。不要像我一样，在使用新工具时检查你的构建配置！

使用Angular 2

1 个答案: