Question

我有一个关于使用Angular动画的问题，如果我编写click事件，那是可行的。但是我使用的google.maps.event点击不起作用。全球价值已经改变。我认为该值已更改，但并未影响动画。

我的Angular版本是5.2.0

maps.component.ts

@Component({
  selector: 'app-ngx-mw-google-maps',
  templateUrl: './ngx-mw-google-maps.component.html',
  styleUrls: ['./ngx-mw-google-maps.component.sass'],
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('sideboxAnimation', [
      state('inactive', style({
        left: '-380px',
      })),
      state('active', style({
        left: '0',
      })),
      transition('* => *', animate('300ms ease-in-out')),
    ]),
  ]
})

export class NgxMwGoogleMapsComponent implements OnInit {
  const that = this;
  sideView = 'inactive';

  ...

  mwInitMaker() {

    ...

    google.maps.event.addListener(marker, "click", function (e) {
      that.clickSideBoxAnimate();
    }
  }

  private clickSideBoxAnimate() {
    if (this.sideView === 'inactive') {
      this.sideView = 'active';
    } else {
      this.sideView = 'inactive';
    }
    console.log(this.sideView);
  }

  animStart(event) {
    console.log(event);
  }

  animEnd(event) {
    console.log(event);
  }
}

maps.component.html

<div class="maps-wrapper">
  <div #map class="map"></div>
  <div class="mw-side" 
  [@sideboxAnimation]='sideView' 
  (@sideboxAnimation.start)="animStart($event)" 
  (@sideboxAnimation.done)="animEnd($event)">
    ...
    <div class="mws-close" (click)="clickSideBoxAnimate()">
      <i class="icon-left-open" *ngIf="sideView == 'active'"></i>
      <i class="icon-right-open" *ngIf="sideView == 'inactive'"></i>
    </div>
  </div>
</div>

mws-close可以播放动画，但是google事件无法播放。

run on bowser

Answer 1

最后，我使用detectChanges检查视图及其子级。是工作。

角度动画值已更改但不起作用

1 个答案: