在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 来编辑样式/类。

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

  constructor(private renderer: Renderer2) {}

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