Угловой 6: Прокрутите до элемента по щелчку от боковой навигации дочернего компонента

Question

Я использую маршрутизатор A6, в котором я рендеринг 3 компонентов на / новый маршрут. Я также использую Angular-материал и компонент sidenav. Мой parentComponent является основной областью содержимого, а childComponent - содержимым ящика.

  {
    path: 'new',
    children: [
      {
        path: '',
        component: ParentComponent
      },
      {
        path: '',
        component: SiblingComponent,
        outlet: 'nav',
        children: [
          {
            path: '',
            component: ChildComponent
          }
        ]
      }
    ]
  }

childComponent html

<div class="new-event-side-nav">
  <mat-nav-list>
    <a mat-list-item>
    <span>Some Details</span>
    </a>
    <a mat-list-item [href]="otherDetail">
    <span>Other Details</span>
    </a>
  </mat-nav-list>
</div>

parentComponent

<mat-card>
    <div id="some_detail">
      <p>Some Content</p>
    </div>
    <div id="other_detail">
      <p>Other Content</p>
    </div>
</mat-card>

Я могу извлечь идентификаторы обоих div в моем дочернем компоненте, используя

otherDetail = document.getElementById('other_detail');

и добавить его в HTML моего дочернего компонента. Но при щелчке он не прокручивается до элемента, я получаю 404. Более того, мой URL-адрес изменяется с / new на /% 5Bobject% 20HTMLDivElement% 5D

Я новичок в прокрутке до элементов в Angular 6. Кто-нибудь имел опыт прокрутки к различным элементам, используя sidenav из дочернего элемента?

Answer 1

Примерно год назад у меня была такая же проблема, и мне пришлось написать собственное решение. Я никогда не был очень доволен этим - сделать автоматическую прокрутку плавной и естественной на вид было намного сложнее, чем я себе представлял (из-за того, что scrollTop не был атрибутом, который можно было анимировать). Это привело меня в кроличью нору изучения javascript «функций ослабления» ... не ходите по этому пути.

Если все сводится к этому, вы можете привязать атрибут scrollTop к любому div. Если в директиве вы можете использовать HostBinding, т.е. -

 @HostBinding('scrollTop') scrollTop : number = <<whatever...>>;

Или если это дочерний элемент в шаблоне, вы можете просто написать нормальную привязку атрибута

 <div class="scrolling-div" [scrollTop]="scrollTop" ></div>

При этом достаточно просто прокручивать div вверх и вниз по мере необходимости - но в основном это будет мгновенно, если вы не анимируете его вручную с помощью таймеров / интервалов. Я объединил эту технику с очень простой директивой ссылки, которую я поместил в каждый элемент, к которому я хотел иметь возможность прокручиваться. Эта директива ссылки выдает свое вертикальное положение на странице (чтобы дать скроллеру пункт назначения), а также событие, когда она нажимается для предупреждения скроллера. Я смог сделать мой внешний вид просто нормальным - никакого ослабления, но была линейная анимация, на которую было терпимо смотреть. Если вы решили написать собственное решение, дайте мне знать, и я смогу поделиться всем кодом, который я написал в тот же день