ג'אווהסקריפט - גלילה לאיבר בלחיצה ב-Angular 4

אני רוצה להיות מסוגל לגלול אל יעד כשכפתור נלחץ. חשבתי על משהו כזה.

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

ובקובץ component.ts שלי יש שיטה כמו.

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

אני יודע שהקוד למעלה אינו תקף אך רק כדי להראות מה חשבתי. רק התחלת ללמוד Angular 4 ללא ניסיון קודם ב-Angular. חיפשתי משהו כזה אך כל הדוגמאות הן ב-AngularJs ששונה הרבה מ-Angular 4

תשובה #1

אתה יכול לעשות את זה ככה:

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

ואז ברכיב שלך:

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

עריכה: אני רואה תגובות שמציינות שזה כבר לא עובד מכיוון שהאלמנט אינו מוגדר. יצרתי דוגמת StackBlitz ב-Angular 7 וזה עדיין עובד. מישהו יכול בבקשה לספק דוגמה שבה זה לא עובד?

תשובה #2

באנגולר 13 עובד מצוין

HTML

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

ברכיב

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

תשובה #3

הנה איך עשיתי את זה באמצעות 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();
}

תשובה #4

יש למעשה דרך טהורה ב-JavaScript להשיג זאת מבלי להשתמש ב-setTimeout או requestAnimationFrame או jQuery.

בקיצור, מצא את האלמנט ב-scrollView שאליו אתה רוצה לגלול, והשתמש ב-scrollIntoView.

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

הנה פלנקר.

תשובה #5

דרך נוספת לעשות זאת ב-Angular:

סימון:

<textarea #inputMessage></textarea>

הוסף את התכונה ViewChild():

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

גלול לכל מקום שתרצה בתוך הקומפוננטה בעזרת הפונקציה scrollIntoView():

this.inputMessageRef.nativeElement.scrollIntoView();

תשובה #6

לג'ון יש את התשובה הנכונה וזה עובד בפרויקטים שלי ב-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' });
}

בגלל שרציתי לגלול חזרה לראש הדף מהתחתית, יצרתי שירות שבו הפונקציה הזו נמצאת והזרקתי אותו לרכיבי הניווט והתחתית ועברתי את 'header' או 'footer' במקומות הנחוצים. רק זכרו באמת לתת להצהרות הרכיב את שמות המחלקות שבהן משתמשים:

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

תשובה #7

אתה יכול לגלול לכל הפנייה לרכיב בתצוגה שלך באמצעות בלוק הקוד למטה. שים לב שהיעד (id של elementref) יכול להיות על כל תג HTML תקף.

בצפייה (קובץ HTML)

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

  

על הקובץ .ts,

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

תשובה #8

ב-Angular אתה יכול להשתמש ב-ViewChild וב-ElementRef: תן לרכיב ה-HTML שלך הפניה

<div #myDiv></div> 

ובתוך הרכיב שלך:

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

אתה יכול להשתמש ב-this.myDivRef.nativeElement כדי להגיע לאלמנט שלך