如何在 Angular 6 中使用 ANCHOR SCROLL

Question

我创建了一个表格，其中包含使用棱角材料的选项卡和表格下方的一个框。

当用户单击表格中的某个值时，该框下方的框应启用并向下滚动到该框所在的底部页面

我只是使用了所有在 JS 中完成的可能方式，但没有一个效果很好

我试过这个http://plnkr.co/edit/qIMIhIhqPymICTe0uzSh?p=preview

下面是表格，点击第一个值会触发该框

 <mat-tab-group (selectedTabChange) = "openState($event)">
        <mat-tab label="Closed Meetings">
          <mat-form-field id="filter">
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
          </mat-form-field>
          <table mat-table [dataSource]="this.dataSource"  class="mat-elevation-z8">
            <ng-container matColumnDef="resource_name">
              <th mat-header-cell *matHeaderCellDef>Resource Name</th>
              <td id="resurceName" mat-cell style="cursor: pointer" *matCellDef="let element" (click)="meetingInfo(element)">
              {{element.resource_name}}
              </td>
            </ng-container>
            <ng-container matColumnDef="meeting_id">
              <th mat-header-cell *matHeaderCellDef>Meeting Id</th>
              <td mat-cell *matCellDef="let element"><a>{{element.meeting_id}}</a></td>
            </ng-container>
            <ng-container matColumnDef="resource_Email">
              <th mat-header-cell *matHeaderCellDef>Resource Email</th>
              <td mat-cell *matCellDef="let element"> {{element.resource_Email}}</td>
            </ng-container>
            <ng-container matColumnDef="contact">
              <th mat-header-cell *matHeaderCellDef>Contact</th>
              <td mat-cell *matCellDef="let element"> {{element.contact}}</td>
            </ng-container>
            <ng-container matColumnDef="meeting_fd_link">
              <th mat-header-cell *matHeaderCellDef>Meeting feedback link</th>
              <td mat-cell *matCellDef="let element"><a [routerLink]="['/b/signup-business']">
                {{element.meeting_fd_link}}</a></td>
            </ng-container>
            <ng-container matColumnDef="meeting_time">
              <th mat-header-cell *matHeaderCellDef>Meeting Time</th>
              <td mat-cell *matCellDef="let element"> {{element.meeting_time}}</td>
            </ng-container>
            <ng-container matColumnDef="rating">
              <th mat-header-cell *matHeaderCellDef>Rating</th>
              <ul>
                <td mat-cell *matCellDef="let element">
                  <li *ngFor="let i of element.rate">
                    <span class="fa fa-star checked"></span>
                  </li>
                </td>
              </ul>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="this.displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: this.displayedColumns;"></tr>
          </table>
        </mat-tab>
</mat-tab-group>

箱码

<div class="row" id="info" *ngIf="this.details">
  <div class="col-md-12 mb-3" id="heading">
  <h3>Meeting Information</h3>
  </div>
  <div class="col-6 col-md-3">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>
  <div class="col-6 col-md-3">
    <p>: {{meetingDetails.resource_name}}</p>
    <p>: {{meetingDetails.resource_Email}}</p>
    <p>: {{meetingDetails.contact}} </p>
  </div>
  <div class="col-6 col-md-3">
    <p class="msg">Meeting Title</p>
    <p class="msg">Meeting Feedback Link</p>
    <p class="msg">Meeting Time</p>
    <button class="cncl" name="Submit" type="Submit" (click)="cancelMeeting(meetingDetails.meeting_id)">Cancel Meeting</button>
  </div>
  <div class="col-6 col-md-3">
    <p>: unavailable</p>
    <p>: unavailable</p>
    <p>: {{meetingDetails.meeting_time}} </p>
    <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
  </div>
</div>

Answer 1

您可以在父组件中滚动。

插入您的表格和框以分隔组件。例如。 TableComponent 带有选择器 table-example。 在 TableComponent 中添加 Output 和点击事件：

@Output() clickedInfo = new EventEmitter<any>();

接下来定义表父div的大小并添加样式overflow: scroll。 在父 div 上添加 模板引用变量 (#scrollMe)。

例如。父组件的模板：

<div #scrollMe style="overflow: scroll; height: 300px;">
  <table-example (clickedInfo)="clickedInfo($event)" ></table-example>
</div>

在父组件中添加ElementRef（带有模板引用变量）。

@ViewChild("scrollMe") scrollMe: ElementRef;

现在当您收到点击事件时，您可以滚动到该框。
scrollMe ElementRef 当您插入顶部滚动的 px 位置时有 nativeElement.scrolTop。插入到整个组件的这个可变高度（来自scrollMe.nativeElement.scrollHeight）：

clickedInfo(event: string): void {
   this.scrollMe.nativeElement.scrollTop = this.scrollMe.nativeElement.scrollHeight;
}

https://stackblitz.com/edit/angular-3cswfs 上的工作示例

在示例box中我也放置了一个单独的组件。