Javascript 渲染后向元素添加类

我有一个带有动态定义的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>

我无法将

#svg_image

标记放在实际目标上，因为它没有在渲染时定义，并且会引发错误。所以我选择了

childNodes

路线

---

代码有什么问题？

要将类添加到

类列表中，需要调用
classList.add（'tada'，'animated'）

请参见
使用
@angular/core
中的
渲染器
服务注入，您可以向元素添加两个类：

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

这应该行得通，但我认为它失败的原因和我的一样，这仍然是个谜。可能值得注意的是，当我检查元素时，
#svg_image
标记没有出现在元素上。这应该可以工作，但我认为它失败的原因与我的相同，这仍然是一个谜。值得注意的是，当我检查元素时，
#svg_image
标记没有出现在元素上。我想我需要一种不同的方式来添加svg，因为页面渲染器上不存在该子节点。您运行的是哪个生命周期挂钩？我只是在加载之前直接将Cals添加到svg。请使用
this.svg.nativeElement.querySelector（…）
而不是所有对
childNodes[]的引用
如果在这些子节点之前添加一个节点，那么数组索引将关闭，代码将中断。
...
const svgElement = this.svg.nativeElement.childNodes[1].childNodes[1];
this.renderer.setElementClass(svgElement, "animated tada", true);
...