JavaScript:如何将事物放在调用堆栈的末尾?

时间:2017-11-22 13:29:16

标签: angular

我正在以角度(2)工作,越来越多的我进入我需要等待角度来做它的魔法然后执行我的代码的情况。 所有它的实际意思就是将动作放在调用堆栈的末尾(我现在通过设置0 ms的超时和解释我的操作的注释来实现)。 但这似乎是一个自作聪明。 我听说有人在谈论ngOnChange,但这似乎更糟糕,我的意思是我需要执行此代码的每个元素的每次更改都会发生在极少数情况下?

最近的例子是当用户更改视图时,我希望视频开始播放(相同的组件)。

编辑:

这里有一些可视化问题的代码(解决它不是问题,因为我还有其他情况需要在调用堆栈的背面放置项目):

switchInnerAddRuleView(innerView: string): void {
    this.innerAddRuleView = innerView;
    if (innerView === 'camera') {
        setTimeout( _ => this.videoPlayOn(0, true) , 0);
    }
}

videoPlayOn(time: number, isPolygon: boolean = false): void {
    const videoPlayerElement: string = (isPolygon) ? 
   'elPolygonVideoPlayer' : 'elVideoPlayer';
    this[videoPlayerElement].nativeElement.currentTime = time;
    if (this[videoPlayerElement].nativeElement.paused) {
      this[videoPlayerElement].nativeElement.play();
    }
}

模板:

<button (click)="switchInnerAddRuleView('camera')"><button>
<div *ngIf="innerAddRuleView === 'camera'" class="step-two">
        <video #polygonVideoPlayer preload="auto" class="video" [src]="currentDetectionOnView.camera.liveStreamUrl"></video>
      </div>

所以我的问题是,如何以正确的方式在调用堆栈的末尾放置一些东西?或者是setTimeout我唯一的选择吗?

2 个答案:

答案 0 :(得分:0)

也许使用ngAfterViewInit并在那里执行代码

https://angular.io/guide/lifecycle-hooks

答案 1 :(得分:0)

您的组件应该实现OnChanges而不是OnInit 并在ngOnChanges()函数

中执行所需的操作
ngOnChanges(){
 if (this.innerAddRuleView === 'camera') {
        this.videoPlayOn(0, true);
}