訪問elementRef在點擊事件角

Question

我在組件定義字符串列表，它的渲染鑑於這樣的：

<span class="one" (click)='do($event, index, item)' 
*ngFor="let item of result;let index = index" >{{item}} </span> 

後的每個項目點擊我希望該項目後添加div元素：

clickedSpan.insertAdjacentHTML('beforeend', '<div >Hi!</div>'); 

如何訪問elementRef in do函數？或者是否有其他解決方案來處理由ngFor渲染的渲染跨度？

Answer 1

我模板，你可以在span標籤創建一個變量，如「#addDivElement」

您可以通過使用@ViewChild訪問組件這些變量（「addDivElement」）和你可以根據需要渲染HTML元素

從'@ angular/core'導入{Component，ViewChild，ElementRef，Renderer};

@Component（{ 選擇： '我的應用程序內'， templateUrl： '/app/angular/app.angular.core.html' }） 出口類AppComponent {

@ViewChild('addDivElement') 
public addElement: ElementRef; 

public constructor(private rendere: Renderer) { 

} 

public arrayData = ["Item1", "Item2", "Item3"]; 

public doSomething(event, index, item) { 
    this.addElement.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>'); 

} 

}

Answer 2

試試這個

 do(event, index, item) { 
      this.result.splice(index, 0, 'Hi!'); 
     }