Angular 4 - 将图像以45度步长旋转

Question

我有一张图片和两个按钮，应该能够将该图片旋转45度或-45度。

<div>
    <img src="/assets/img1.png">
</div>
<div>
    <button type="submit">rotate left 45</button>
    <button type="submit">rotate right 45</button>
</div>

我该如何创建一个能够将CSS变换旋转应用于这张图片的函数？步骤应该为45度，并且不论用户点击按钮多少次，它都应该不停地旋转。

- John Theoden

---

你可以在标签（引用）上使用(#)，然后创建一个函数（在.ts文件中）来应用CSS样式。或者使用Angular提供的动画。阅读文档。 - Izio

作为入门，您可以使用CSS来旋转图像，如下所示：transform: rotate(45deg); - Flink

Answer 1

你可以在点击时更新元素的CSS transform属性。

let rotationAmount = 0;

function rotateImage(direction) {
  rotationAmount += direction == 'left' ? -45 : 45;
  
  document.querySelector('#image').style.transform = `rotate(${rotationAmount}deg)`;
}

#image {
  height: 100px;
  width: 100px;
}

.button-wrapper {
  margin-top: 30px;
}

<div>
    <img id="image" src="">
</div>
<div class="button-wrapper">
    <button type="submit" onclick="rotateImage('left')">rotate left 45</button>
    <button type="submit" onclick="rotateImage('right')">rotate right 45</button>
</div>

- Josh

---

你能做一些更改以适配 Angular 2+ 吗？ :) - John Theoden

或者...我该如何在Angular 2+中执行document.querySelector('#image').style.transform = 'rotate(' + rotationAmount + 'deg)';？ - John Theoden

这很好，但是有一个缺点，你直接访问DOM，这不是一个好的实践方法，所以最好使用Renderer2，只需将您的代码行“document.querySelector('#image').style.transform = rotate(${rotationAmount}deg);”替换为“document.querySelector('#image').style.transform = rotate(${rotationAmount}deg);”，并且不要忘记从@angular/core导入Renderer2并在构造函数中实例化它。 - Alekya