在渲染後向元素添加類

我有一個組件，其中包含一個動態定義的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中 –

在渲染後向元素添加類

回答

相關問題