Question

我有一个带有bootstrap nav-tabs元素的组件。它们具有动态ID，因为该组件用于ngFor。 id在OnInit处理程序中给出，因为它们依赖于@Input对象。

我在组件上有一个方法，该方法附加到所有选项卡的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>

Answer 1

你的问题不是很清楚。我想像是

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

会做你想做的事。
事实上，模板变量不是必需的，因为event.target也允许访问被点击的元素。

Angular 2动态访问模板元素

1 个答案: