Как использовать ANCHOR SCROLL в Angular 6 - PullRequest
Новая
       13

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

0 голосов
/ 04 января 2019

Я создал таблицу с вкладками, используя угловой материал и поле под таблицей.

Когда пользователь щелкает одно из значений в таблице, то поле, которое находится под этим, должно быть активировано и прокручиваться вниз.на нижнюю страницу, где находится поле

Я только что использовал все возможные способы, что сделано в 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>

1 Ответ

0 голосов
/ 06 января 2019

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

Вставьте таблицу и поле в отдельный компонент.Например.TableComponent с селектором table-example.В TableComponent добавьте Output с событием по нажатию: 

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

Далее определите родительский элемент таблицы div размер и добавьте стиль overflow: scroll.Добавьте ссылочную переменную шаблона (#scrollMe) в родительский раздел.

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

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

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

@ViewChild("scrollMe") scrollMe: ElementRef;

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

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

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

В примере box Я такжепомещены в отдельный компонент.

...