Angular5 прокрутка до определенного элемента - PullRequest
Новая
       8

Angular5 прокрутка до определенного элемента

0 голосов
/ 03 июня 2018

У меня есть меню, и у меня есть 4 пункта, скажем, 1,2,3,4.

Я хочу перенаправить пользователя на одну и ту же страницу при нажатии элемента 1 и 2, но пользователь должен увидеть другую часть страницы (прокрутить вниз до страницы), и эта страница также является целевой страницей приложения, поэтомукогда пользователь вошел в систему, он / она должен быть в верхней части страницы, то есть в это время он не должен прокручивать отдельные разделы на 1 или 2.

Когда пользователь нажимает на элемент 1, пользователь должен прокручиваться внизв раздел, и если нажать 3, он / она должен перенаправить на другую страницу (я могу управлять).

Я использую угловой материал с угловым5.

Можете ли вы помочь мне с этим.

1 Ответ

0 голосов
/ 03 июня 2018

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

@Directive({
  selector: '[appScroll]'
})
export class ScrollDirective {

  @Input() target;

  constructor() { }

  @HostListener('click') onClick() {
    this.target.scrollIntoView();
  }

}

, которая может использоваться следующим образом: 

<h1 appScroll [target]="head">Hello {{name}}!</h1>
<h2 #head>Test<h2>

Это принимает элемент в качестве ввода (в приведенном вышеНапример, мы передаем h2) и слушаем событие click (в данном случае на h1).Если щелкнуть по нему, он прокручивает элемент ввода для просмотра.

Вот пример StackBlitz.Если вы щелкнете заголовок «Hello», он должен прокрутить заголовок «test» для просмотра.

https://angular -r9outm.stackblitz.io /

...