Angular2將呈現的HTML元素附加到數據中

Question

我有一個我想用Angular的* ngFor迭代的對象數組。

渲染項目後，我想在引用呈現該對象的HTML節點的對象（稱爲nativeElement）上設置新屬性。

下面的代碼說明了目標，但顯然不起作用。

<div *ngFor="let obj of arrayOfObjs" 
    [ngInit]="obj.nativeElement = thisDivNode"> 

</div> 

如何以最簡潔的方式設置obj上的元素引用？

Answer 1

你可以只創建一個指令和項目傳遞給它，並讓該指令的要素分配給項目

@Directive({ 
    selector: '[addElement]' 
}) 
class AddElementDirective implements OnInit, OnDestroy { 
    @Input('addElement') obj: any; 

    constructor(private el: ElementRef) {} 

    ngOnInit() { 
    this.obj.nativeElement = this.el.nativeElement; 
    } 

    ngOnDestroy() { 
    this.obj.nativeElement = null; 
    } 
} 

然後，只需使用它像

<div *ngFor="let item of data" [addElement]="item"> 
</div> 

我個人認爲這比任何你可以想到的標記雜技都要乾淨。