Angular 2/4/6：如何动态更新 scss答案

【问题标题】：Angular 2/4/6: how to update the scss dynamicallyAngular 2/4/6：如何动态更新 scss
【发布时间】：2018-08-29 22:26:49
【问题描述】：

我正在尝试在 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根本没有更新。

欢迎提出任何建议。

【问题讨论】：

标签： javascript css angular sass

【解决方案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>

【讨论】：

但是在尝试之前，请检查浏览器开发工具是否向左充电，顶部确实是您需要的。也许你需要做一些 translateX oy Y 来代替。
对不起，它仍然不能与 [ngStyle] 一起使用，而不是使用 style = "..." 。它不适用于左右。我尝试了 translateX 和 Y，我可以移动视频，但是它破坏了帧（.stage）和视频的比例（.video）。
也许你最初的方法是有效的。但你改变了错误的风格。正如我所说，您需要先在浏览器上试用开发工具

【解决方案2】：

在玩了很久 css 之后，我找到了一个可行的解决方法：

video.component.html

<div class="stage">
    <video controls autoplay loop muted [ngStyle]="{'top': top, 'left': left, 'transform': 'scale('+ scale +')'}">
        <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">    
    </video>
</div>

<div class="row">
    <div class="col-1 ">
        <button type="button" class="btn btn-primary btn-tn " (click)="moveLeft()">
            Left
        </button>
    </div>
    <div class="col-1">
        <button type="button" class="btn btn-primary btn-tn " (click)="moveRight()">
            Right
        </button>
    </div>
    <div class="col-1">
        <button type="button" class="btn btn-primary btn-tn " (click)="moveUp()">
            Up
        </button>
    </div>
    <div class="col-1">
        <button type="button" class="btn btn-primary btn-tn " (click)="moveDown()">
            Down
        </button>
    </div>
    <div class="col-1">
        <button type="button" class="btn btn-primary btn-tn " (click)="zoomIn()">
            Zoom In
        </button>
    </div>
    <div class="col-1">
        <button type="button" class="btn btn-primary btn-tn " (click)="zoomOut()">
            Zoom Out
        </button>
    </div>
</div>

video.component.scss

.stage{
    width:400px;
    height:300px;
    position:relative;
    overflow:hidden;
    background-color: coral
  }
  video{
    position:absolute;
    width:400px;
    height:300px;
  }

video.component.ts

l: number = 0;
t: number = 0;
left = '0px';
top = '0px';

scale: number = 1;

moveUp() {
        this.t -= 5;
        this.top = this.t + 'px';
    }

    moveDown() {

        this.t += 5;
        this.top = this.t + 'px';

    }

    moveLeft() {
        this.l -= 5;
        this.left = this.l + 'px';
    }

    moveRight() {
        this.l += 5;
        this.left = this.l + 'px';
    }

    zoomIn() {
        this.scale += 0.2;

    }

    zoomOut() {
        this.scale -= 0.2;

    }

虽然它对我有用，但这个主题仍然可以找到任何更好的解决方案。

编码愉快！

【讨论】：