Как использовать ANCHOR SCROLL в Angular 6

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, Добавьте переменную ссылки на шаблон (#scrollMe) в родительский div.

Например. шаблон вашего родительского компонента:

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

В родительский компонент добавить ElementRef (со ссылочной переменной шаблона).

@ViewChild("scrollMe") scrollMe: ElementRef;

Теперь, когда вы получаете событие клика, вы можете перейти к полю.
scrollMe ElementRef есть nativeElement.scrolTop когда вы вставляете px позицию верхней прокрутки. Вставьте в эту переменную высоту всего компонента (из scrollMe.nativeElement.scrollHeight):

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

Рабочий пример на https://stackblitz.com/edit/angular-3cswfs

В окне примера я также поместил в отдельный компонент.