javascript - Angular 2/4/6 : how to update the scss dynamically

Question

我正在尝试在 Angular 2/4/6 中使用 scss 动态转换视频(类似于这篇文章:https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/)

我开始第一步是向左/向右/向上/向下移动视频

我做了什么:

video.component.html

<div class="stage">
    <video controls autoplay loop [style.left.px] = "v" [style.top.px] = "h">
        <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
    </video>
</div>

<div class="row">
    <div class="col-3 ">
        <button type="button" class="btn btn-primary btn-tn " (click)="left()">
            Left
        </button>
    </div>
    <div class="col-3">
        <button type="button" class="btn btn-primary btn-tn " (click)="right()">
            Right
        </button>
    </div>
    <div class="col-3">
        <button type="button" class="btn btn-primary btn-tn " (click)="up()">
            Up
        </button>
    </div>
    <div class="col-3">
        <button type="button" class="btn btn-primary btn-tn " (click)="down()">
            Down
        </button>
    </div>
</div>

video.component.scss

.stage{
    width:400px;
    height:300px;
    position:relative;
  }
  video{
    -moz-transform:scale(1.5);
  -webkit-transform:scale(1.5);
  -o-transform:scale(1.5);
  -ms-transform:scale(1.5);
  transform:scale(1.5);
  }

video.component.ts

@Component({
    selector: 'app-video',
    templateUrl: './video.component.html',
    styleUrls: ['./video.component.scss']

})
export class VideoComponent implements OnInit {

    v: number = 0;
    h: number = 0;

    constructor() {

    }

    ngOnInit() {
    }

    left(){
        this.v -= 5;
    }

    right(){
        this.v +=5;
    }
    up(){
        this.h -=5;
    }

    down(){
        this.h +=5;
    }
}

结果:没有任何反应。似乎 scss 根本没有更新。

如有任何建议，我们将不胜感激。

Answer 1

尝试 ngStyle 方法

<video controls autoplay loop [ngStyle]="{'left.px': v, 'top.px': h}">
   <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
</video>