Angular routerlink с параметрами и остановкой фрагмента в params - PullRequest
Новая
       73

Angular routerlink с параметрами и остановкой фрагмента в params

0 голосов
/ 27 мая 2020

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

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

Вот код: 

   <a
        routerLink="/level2/{{ element.componentId }}"
        [queryParams]="{ part: element.part }"
        fragment="{{ element.id }}"
    >
         <mat-icon>keyboard_arrow_right</mat-icon>
    </a>



    <section class="mat-elevation-z3">
      <mat-tab-group>
        <mat-tab  class="parts-page-tab">
          <div>
            <app-list-table
            [partsTable]="firstTable"
            >
            </app-list-table>
          </div>
        </mat-tab>
        <mat-tab class="parts-page-tab">
          <div>
        <app-list-table
          [partsTable]="secondTable"
        ></app-list-table>
        </div>
       </mat-tab>
        <mat-tab class="parts-page-tab">
        <div>
        <app-list-table
          [partsTable]="thirdTable"
        ></app-list-table>
        </div>
       </mat-tab>
     </mat-tab-group>
     </section>



    <table>
    ...
        <tr 
          mat-header-row 
          *matHeaderRowDef="displayedColumns" 
          class="part-list-table-header-row">
        </tr>
        <tr
          mat-row
          *matRowDef="let part; columns: displayedColumns"
          class="element-row"
          [class.expanded-row]="expandedPart === part"
          id="{{ part.id }}"
        ></tr>
        <tr 
           mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row">
        </tr>
</table>
...