เลื่อนไปที่องค์ประกอบเมื่อคลิกใน 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"});

นี่คือplunkr

ใน Angular 7 ทำงานได้อย่างสมบูรณ์แบบ

HTML

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

ในส่วนประกอบ

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

จอนมีคำตอบที่ถูกต้องและใช้งานได้ในโครงการเชิงมุม 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();

คุณสามารถเลื่อนไปที่องค์ประกอบอ้างอิงในมุมมองของคุณได้โดยใช้บล็อกโค้ดด้านล่าง โปรดทราบว่าเป้าหมาย(id elementref ) อาจอยู่บนแท็ก 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 คุณสามารถใช้ViewChildและ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