动画

Question

拥有此代码：

<ul>
  <li routerLinkActive="is-active"><a routerLink="/user/register"><span>registration</span></a></li>
  <li routerLinkActive="is-active"><a routerLink="/user/login"><span>login</span></a></li>
  <li role="menu" class="drop-down">
    <a class="drop-down--toggle" (click)="toggle()">
      <span class="flag-icon" [ngClass]="_currentLocale.flag"></span> 
    </a>
    <ul [@stateAnimation]="dropDownState" (@stateAnimation.done)="dropDownAnimEnd($event)" class="drop-down--menu">
      <li *ngFor="let locale of _localeMenu" (click)="change(locale)">
        <a>
          <span class="flag-icon" [ngClass]="locale.flag"></span>
          <span>{{locale.name}}</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

除了这一行，我设法让一切正常：

<span class="flag-icon" [ngClass]="_currentLocale.flag"></span>

当从下拉菜单中选择新的区域设置时，首先关闭菜单并更改区域设置。之后，更新当前的语言环境和语言环境菜单。但是，在我再次切换菜单之前，当前的语言环境标志不会更新。在Safari中似乎可以工作，但不适用于Chrome，Firefox和Opera。我在这里做错了吗？任何帮助将不胜感激。

更新：这是LocaleModel：

export class LocaleModel {
  id: number;
  code: string;
  name: string;
  fileName: string;
  flag: string;

  constructor(id: number, code: string, name: string, fileName: string, flag: string) {}
}

Answer 1

在花了1个小时创造我的第一个吸虫之后，我惊呆了，看到它按预期工作。然后我意识到我在plunker中使用的模板具有最新版本的角度，因此简单的npm更新解决了这个问题。仍然不知道为什么v2.1仅适用于Safari。

<强>更新

罪魁祸首似乎是this resolved animation bug，在动画结束后无法更新绑定。 Safari可能一直在运行，因为它正在使用the polyfill，因为它不支持Web Animations API，找不到信息here。