對模板元素的角度2動態訪問

我有一個組件帶有引導nav-tabs元素。它們具有動態ID，因爲組件在ngFor中使用。 ID在OnInit處理程序中給出，因爲它們依賴於@Input對象。對模板元素的角度2動態訪問

我有一個附加到所有選項卡的click事件的組件上的方法，它根據點擊順序處理一個有點複雜的邏輯連接滾動條和擴展選項卡元素。換句話說，我需要在我的模板元素上使用類似addClass和removeClass的方法。

直接在模板HTML中實現該邏輯沒有簡單可讀的方法。這太複雜了。

我已經查看了@ViewChild元素，但這不適用於此，因爲我無法在我的點擊處理程序中動態使用它。我需要在組件級別上定義它，但是在那個時候我的ID沒有被給出。

什麼是最好的和Angular2的方式來訪問我的點擊處理程序中動態的模板元素，並從他們添加和刪除類？

按照要求，這裏是我的點擊處理程序中的邏輯。作爲一個概念證明，我使用document訪問權限，但顯然不是這樣。

public toggleOverflow (id: string): void 
{ 
    let i = this.endsWith(id, "1") ? 0 : 1; 

    let anyOpen = this.tabActive[0].open || this.tabActive[1].open; 
    if (!anyOpen) 
    { 
     document.getElementById(this.containerId).classList.remove("movie-info-overflow"); 
     document.getElementById(this.onTopId).classList.add("ontop"); 
    } 

    if (!this.tabActive[i].open) 
    { 
     this.tabActive[i].open = true; 
     this.tabActive[i].id = id; 
     document.getElementById(id).classList.add("scroll"); 
     if (anyOpen) 
     { 
      // close currently open tab 
      i = Math.abs(i - 1); 
      this.tabActive[i].open = false; 
      document.getElementById(this.tabActive[i].id).classList.remove("scroll"); 
     } 
    } 
    else 
    { 
     this.tabActive[i].open = false; 
     document.getElementById(id).classList.remove("scroll"); 

     document.getElementById(this.containerId).classList.add("movie-info-overflow"); 
     document.getElementById(this.onTopId).classList.remove("ontop"); 
    } 
}

這些選項卡最初只顯示部分文本，爲了不覆蓋列表中的以下元素。只有當它們被點擊時，全文才會被顯示，方法是在文本中添加一個滾動條（類別scroll），並按照z順序（類別ontop）將選項卡設置爲高。

正如您所看到的，我不僅需要訪問導致click事件的元素，還需要訪問鄰近的標籤元素。

模板的相關部分：

<ul class="nav nav-tabs movie-tabs"> 
    <li class="active"><a [attr.href]="'#' + tabId1" data-toggle="tab" (click)="toggleOverflow(tabId1)">Description</a></li> 
    <li ng-if="movie.comments.length > 0"><a [attr.href]="'#' + tabId2" data-toggle="tab" (click)="toggleOverflow(tabId2)">Comments</a></li> 
</ul> 
<div [attr.id]="onTopId" class="tab-content"> 
    <div [attr.id]="tabId1" class="tab-pane movie-tab active"> 
     <p class="movie-description">{{movie.description}}</p> 
    </div> 
    <div [attr.id]="tabId2" class="tab-pane movie-tab"> 
     <p class="movie-description">{{movie.comments}}</p> 
    </div> 
</div>

來源

2016-06-16 hholtij

請添加一些代碼來演示您試圖完成的任務。從你的描述我只能得到一個模糊的圖片。 –

你想要獲取這些元素的位置。你可以添加模板的一部分嗎？ –

這應該很容易用'[ngClass] =「..」'或'[class.scroll] =「...」'來解決。而不是嘗試訪問元素並修改它們，您應該修改模型並使用模板中的綁定來根據模型更改添加/刪除類和樣式。 –

你的問題不是很清楚。我猜想像

<div *ngFor="let item of items" #item (click)="doSomething($event, item)"></div>

會做你想做的。
實際上，模板變量不是必需的，因爲event.target也允許訪問單擊的元素。

來源

2016-06-16 13:30:44

對模板元素的角度2動態訪問

回答

相關問題