在渲染后向元素添加类

我有一个组件，其中包含一个动态定义的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>

我试图添加类名称'动画'和'田田'，但它根本行不通。

@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路线。

代码有什么问题？

来源

2017-08-02 Jeremy Thomas

请使用'this.svg.nativeElement.querySelector（...）'而不是所有对'childNodes []'的引用'如果一个节点被添加到这些子节点之前，那么你的数组索引将关闭，并且您的代码将会中断。 –

一类添加到classList你需要调用classList.add('tada', 'animated')

看到the doc here

来源

2017-08-02 20:10:17 Paul

这应该有效，但我认为这是失败的，因为我的做法仍然是一个谜。值得注意的是，当我检查它时，＃svg_image'标记没有出现在元素上 –

与@angular/core的Renderer服务注入，你既可以类添加到元素：

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

来源

2017-08-02 20:18:58

这应该可行，但我认为这是失败的，因为我的做法仍然是一个谜。值得注意的是，当我检查它时，'＃svg_image'标签没有出现在元素上。我想我需要一种不同的方式来添加svg，因为childNode不存在于页面呈现 –

您在哪个生命周期钩子上运行此更改？ –

我最终只是在加载之前直接将sals添加到svg中 –

在渲染后向元素添加类

回答

相关问题