Прокрутка к элементу при нажатии в Angular 4

Я хочу иметь возможность прокручиваться к цели при нажатии кнопки. Я думал примерно так.

<button (click)="scroll(#target)">Button</button>

А по моему component.tsметоду вроде.

scroll(element) {
    window.scrollTo(element.yPosition)
}

Я знаю, что приведенный выше код недействителен, но просто чтобы показать, о чем я думал. Я только начал изучать Angular 4, не имея опыта работы с Angular. Я искал что-то подобное, но все примеры находятся в AngularJs, который сильно отличается от Angular 4

Сделать это можно так:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

а затем в вашем компоненте:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Изменить: я вижу комментарии, в которых говорится, что это больше не работает из-за того, что элемент не определен. Я создал пример StackBlitz в Angular 7, и он все еще работает. Может кто-нибудь привести пример, когда это не работает?

Вот как я это сделал с помощью Angular 4.

Шаблон

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

добавьте эту функцию в компонент.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

На самом деле существует чистый javascript-способ сделать это без использования setTimeoutили requestAnimationFrameили jQuery.

Короче говоря, найдите в scrollView элемент, который вы хотите прокрутить, и используйте scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

Вот такой плункр .

В Angular 7 работает отлично

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

В компоненте

scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
}

У Джона есть правильный ответ, и это работает в моих проектах angular 5 и 6.

Если бы я хотел щелкнуть для плавной прокрутки от панели навигации к нижнему колонтитулу:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

Поскольку я хотел вернуться к заголовку из нижнего колонтитула, я создал службу, в которой находится эта функция, и внедрил ее в компоненты навигационной панели и нижнего колонтитула и передал в «верхний колонтитул» или «нижний колонтитул», где это необходимо. просто не забудьте указать в объявлениях компонентов используемые имена классов:

<app-footer class="footer"></app-footer>

Другой способ сделать это в Angular:

Разметка:

<textarea #inputMessage></textarea>

Добавить ViewChild()недвижимость:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Прокрутите любое место внутри компонента, используя scrollIntoView()функцию:

this.inputMessageRef.nativeElement.scrollIntoView();

Вы можете прокрутить до любого элемента в вашем представлении, используя блок кода ниже. Обратите внимание, что цель (идентификатор элемента ) может быть в любом допустимом теге html.

На просмотре (файл HTML)

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

в .tsфайле,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Вы можете добиться этого, используя ссылку на угловой элемент DOM следующим образом:

Вот пример в stackblitz

шаблон компонента:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

В Angular вы можете использовать ViewChildand ElementRef: дать вашему HTML-элементу ссылку

<div #myDiv > 

и внутри вашего компонента:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

вы можете использовать, this.myDivRef.nativeElementчтобы добраться до вашего элемента

Мне нужно проделать этот трюк, возможно потому, что я использую собственный HTML-элемент. Если я этого не сделаю, targetу onItemAmounterClickменя не будет scrollIntoViewметода

.html

<div *ngFor"...">
      <my-component #target (click)="clicked(target)"></my-component>
</div>

.ts

onItemAmounterClick(target){
  target.__ngContext__[0].scrollIntoView({behavior: 'smooth'});
}

Я сделал что-то вроде того, о чем вы просите, просто используя jQuery для поиска элемента (например, document.getElementById(...)) и используя .focus()вызов.

Вы можете сделать это с помощью jquery:

код ts:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

html-код:

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

Примените это к элементам, которые вы хотите прокрутить:

<div id="elementTo">some content</div>

Вот образец stackblitz.