在呈现后向元素添加类

Question

我有一个组件，它有一个动态定义的svg图像，我想要动画化。

<div class="special-container">
  <div class="alert-panel">
    <ion-icon class="close" style="float:right;cursor:pointer" color="primary" name="close" (click)="dismiss()"></ion-icon>
    <div class="image-container" #svg_image>
      <div class="image" [style.background]="urgent ? '#f53d3d' : 'dodgerblue'" [innerHtml]="image | keepHtml">
          <!-- SVG loads here -->
      </div>
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-8 push-2><h3 class="title no-margin">{{ title }}</h3></ion-col> 
        <ion-col col-8 push-2> <p class="subtitle subtle no-margin">{{ subtitle }}</p></ion-col> 
      </ion-row> 
    </ion-grid> 

    <div padding *ngIf="type == 'confirm'">
      <ion-grid>
        <ion-row>
          <ion-col><button (click)="dismiss('no')" ion-button full round color="danger">No</button></ion-col>
          <ion-col><button (click)="dismiss('yes')" ion-button full round color="primary">Yes</button></ion-col>
        </ion-row> 
      </ion-grid> 
    </div>
  </div>
</div>

我试图添加‘动画’和'tada‘的类名，但它根本行不通。

@ViewChild('svg_image') svg;

// Correctly logs the svg element
console.log(this.svg.nativeElement.childNodes[1].childNodes[1])
setTimeout(() => {
  this.svg.nativeElement.childNodes[1].childNodes[1].classList += ' animated'
  this.svg.nativeElement.childNodes[1].childNodes[1].classList += ` tada`
}, 1000)

我无法将#svg_image标记放在实际的目标上，因为它不是在呈现时定义的，并且会引发错误。所以我选择了childNodes路线。

代码有什么问题？

Answer 1

要向classList添加类，需要调用classList.add('tada', 'animated')

请参阅这里的医生

Answer 2

通过注入来自Renderer的@angular/core服务，您可以将两个类添加到元素中：

...
const svgElement = this.svg.nativeElement.childNodes[1].childNodes[1];
this.renderer.setElementClass(svgElement, "animated tada", true);
...