旋转图像 Angular 9

Question

我需要使用

从我的组件中旋转 html 中的图像

(document.querySelector('#image') as HTMLElement).style.transform = `rotate(${degree}deg)`;

或

document.getElementById('#image').style.transform = `rotate(${degree}deg)`;

并在此处为其设置一个 ID

<img id= "image" class="arrow" src = "assets/arrow.png"/>

但它导致页面崩溃并出现此错误

core.js:5882 ERROR TypeError: Cannot read property 'style' of null

Answer 1

不使用哈希符号引用它并使用renderer2编辑styles/classes。

详情请查看我的stackblitz sample，主要变化如下：

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    const degree = 90;
    const image = document.getElementById('image');
    this.renderer.setStyle(
      image,
      'transform',
      `rotate(${degree}deg)`
    )
  }

旋转图像 Angular 9

Rotate an image in Angular 9

html

rotation

web

angular