Angular 是否有像处理 CSS 属性那样的声明式方式来处理 HTML 属性的转换？

Question

使用 Angular 动画模块时，有没有办法将 HTML 属性（例如

open

、

inert

等）与 CSS 属性一起传递？

我想知道是否有类似于下面的

style

方法，它会引用一个html元素来设置其属性。

@Component({
  selector: 'app-mycomponent',
  standalone: true,
  templateUrl: './mycomponent.component.html',
  styleUrl: './mycomponent.component.css',
  animations: [
    trigger('onOff', [
      state('on', style({ color: red })),
      state('off', style({ color: black })),
      transition('on <=> off', [animate('400ms 0s ease-out')])
    ])
  ]
})

如果不存在，我可以在类定义中声明 Angular 动画，以便可以通过

@ViewChild

装饰器使用 HTML 元素（即使我不确定如何将其粘贴到触发器的状态声明中。 ..)

一般来说，Angular 框架中是否有一种方法可以像处理 CSS 属性一样以声明方式处理 HTML 属性转换？

Answer 1

您不能像使用

style()

方法操作 CSS 属性一样直接操作 HTML 属性。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.css'],
  animations: [
    trigger('onOff', [
      state('on', style({ color: 'red', opacity: 1 })),
      state('off', style({ color: 'black', opacity: 0.5 })),
      transition('on <=> off', [animate('400ms 0s ease-out')])
    ])
  ]
})
export class MyComponent {
  @ViewChild('myElement') myElement: ElementRef;

  currentState = 'on';

  toggleState() {
    this.currentState = this.currentState === 'on' ? 'off' : 'on';
    // Dynamically manipulate HTML attributes
    if (this.currentState === 'on') {
      this.myElement.nativeElement.setAttribute('open', '');
    } else {
      this.myElement.nativeElement.removeAttribute('open');
    }
  }
}