Angular2获取给定#id的Div位置答案

【问题标题】：Angular2 get Div position of given #idAngular2获取给定#id的Div位置
【发布时间】：2016-07-02 16:03:59
【问题描述】：

我正在 Angular2 中构建时间线计划，方法如下：

        <div class="timelineRow" *ngFor="let team of teams">
            <div class="RowDescriptionColumn">{{team.title}}</div>
            <div class="scheduleblock" *ngFor="let date of dates; let index=index; let odd=odd; let even=even;">
                <div class="timeslot1" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts1'"></div>
                <div class="timeslot2" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts2'"></div>
                <div class="timeslot3" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts3'"></div>
                <div class="timeslot4" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts4'"></div>
            </div>
            <div class="eventBlock" *ngFor="let event of events" [style.left]="getPosition(team, event)">{{event.title}}</div>
        </div>

所以首先我建立时间段（每个日期 4 个），然后，在这些 Timslot-Divs 之上，我想放置事件。事件必须在正确的日期开始，所以我尝试通过做一个 jQuery 来获得位置（我知道：邪恶）..

getPosition(team, event): string {
    if (this.dates) {
      let left = "0px";
      let found = this.dates.filter(myObj => new Date(myObj.date).toDateString() === new Date(event.start).toDateString())[0];
      if (found) {
        let pos = jQuery(this.elementRef.nativeElement).find('#' + team.teamId + '_' + found.id + '_' + 'ts3').position();
        console.log(pos);
        if (pos) {
          left = pos.left + "px";
        }
      }
      return left;
    }
  }

这不起作用，但我不知道如何获得“底层”时隙-Div 的起始位置..

【问题讨论】：

控制台是否给了你正确的价值？我怀疑 getPostion 被调用得太早了。您可以让它先创建它们并通过 ViewChildren 在 ngAfterViewInit 中重新定位。查看孩子使用情况：stackoverflow.com/q/38149322/652850
在 timslotRow bij 上创建了一个标识符，添加了 '#timeLineRow' 并实现了 ngAfterViewInit，这个 ngAfterViewInit (@ViewChild('timeLineRow') myDiv;) 中的 myDiv 是空的......当闯入控制台，在渲染完成之前调用 ngAfterViewInit :(
输入得太早了:)
你能显示一些代码吗？
ngAfterViewChecked() {} 是正确的答案:) ngAfterViewInit，*ngFor 还没有准备好，ngAfterViewChecked，然后 DOM 准备好了。现在我得到一个timeslotRows 列表。所以现在我可以找到我需要的东西（我认为:)）

标签： angular angular2-directives

【解决方案1】：

我怀疑 getPostion 调用得太早了。您可以让视图创建组件，然后使用 ViewChildren/ ViewChild 在ngAfterViewChecked 中重新定位。见Viewchildren usage ngAfterViewChecked 被多次调用，因此请确保您的重新定位逻辑不会再次被调用

【讨论】：