কৌনিক 5 প্রতিটি রুট ক্লিক শীর্ষে স্ক্রোল

Question

আমি কৌণিক ৫ টি ব্যবহার করছি I আমার একটি ড্যাশবোর্ড রয়েছে যেখানে ছোট কন্টেন্ট সহ কয়েকটি বিভাগ এবং এত বড় সামগ্রী সহ কয়েকটি বিভাগ রয়েছে যা শীর্ষে যাওয়ার সময় রাউটার পরিবর্তন করার সময় আমি একটি সমস্যার মুখোমুখি হয়েছি। প্রতিবার শীর্ষে যাওয়ার জন্য আমাকে স্ক্রোল করতে হবে। যে কেউ আমাকে এই সমস্যাটি সমাধান করতে সহায়তা করতে পারে যাতে আমি যখন রাউটারটি পরিবর্তন করি তখন আমার দর্শনটি সর্বদা শীর্ষে থাকে।

আগাম ধন্যবাদ.

Comments

— কৌনিক

Answer 1

কিছু সমাধান রয়েছে, সেগুলি অবশ্যই পরীক্ষা করে দেখুন :)

---

রাউটার আউটলেটটি activateযখন কোনও নতুন উপাদান তাত্ক্ষণিকভাবে চালু করা হচ্ছে তখন ইভেন্টটি ছড়িয়ে দেবে , তাই আমরা (activate)শীর্ষে স্ক্রোল করতে (উদাহরণস্বরূপ) ব্যবহার করতে পারি :

app.componal.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.componal.ts

onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

মসৃণ স্ক্রোলের জন্য উদাহরণটি হিসাবে এই সমাধানটি ব্যবহার করুন:

    onActivate(event) {
        let scrollToTop = window.setInterval(() => {
            let pos = window.pageYOffset;
            if (pos > 0) {
                window.scrollTo(0, pos - 20); // how far to scroll on each step
            } else {
                window.clearInterval(scrollToTop);
            }
        }, 16);
    }

---

আপনি যদি নির্বাচনী হতে চান তবে বলুন যে প্রতিটি উপাদানকে স্ক্রোলিং ট্রিগার করা উচিত নয়, আপনি এটি একটি ifবিবৃতিতে এটি পরীক্ষা করতে পারেন :

onActivate(e) {
    if (e.constructor.name)==="login"{ // for example
            window.scroll(0,0);
    }
}

---

Angular6.1 থেকে, আমরা { scrollPositionRestoration: 'enabled' }অধীর আগ্রহে লোড হওয়া মডিউলগুলিতেও ব্যবহার করতে পারি এবং এটি সমস্ত রুটে প্রয়োগ করা হবে:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

এটি ইতিমধ্যে মসৃণ স্ক্রোলিংও করবে। তবে প্রতিটি রাউটিংয়ে এটি করার জন্য এটি অসুবিধে রয়েছে।

---

অন্য একটি সমাধান হ'ল রাউটার অ্যানিমেশনে শীর্ষে স্ক্রোলিং করা। আপনি শীর্ষে স্ক্রোল করতে চান এমন প্রতিটি উত্তরণে এটি যুক্ত করুন:

query(':enter, :leave', style({ position: 'fixed' }), { optional: true }) 

Comments

ইহা কাজ করছে . আপনার উত্তরের জন্য ধন্যবাদ. আপনি আমার জন্য অনেক সময় বাঁচান

— রায়হান

windowঅবজেক্টে স্ক্রোল ইভেন্টগুলি কৌণিকভাবে কাজ করছে না Any কোন অনুমান কেন?

— সাহিল বাব্বার

এখানে একজন সত্যিকারের নায়ক। হতাশার সম্ভাব্য ঘন্টা সংরক্ষণ করা। ধন্যবাদ!

— অঞ্জনা সিলভা

অজানাসিলভা, ইতিবাচক মন্তব্যের জন্য আপনাকে ধন্যবাদ! আমি আপনাকে খুব আনন্দিত যে এটি আপনাকে সহায়তা করতে পারে :)

— Vega

অলস লোডযুক্ত মডিউলটির কোনও উপায় আছে?

— পঙ্কজ প্রকাশ

Answer 2

আপনি যদি কৌণিক 6 এ সমস্যার মুখোমুখি হন তবে আপনি scrollPositionRestoration: 'enabled'অ্যাপ-রাউটিং.মডিউল.টস এর রাউটারমডুলিতে পরামিতি যুক্ত করে এটি ঠিক করতে পারেন :

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})

Comments

নোট করুন যে কৌনিক 8 ব্যবহার করে 6-নভেম্বর-2019-তে কমপক্ষে scrollPositionRestorationসম্পত্তি গতিশীল পৃষ্ঠাগুলির

— dbeachy1

Answer 3

সম্পাদনা: কৌণিক 6+ এর জন্য দয়া করে নিমেশ নিশারা ইন্দিমেগদারের উত্তরটি উল্লেখ করুন:

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
});

---

আসল উত্তর:

যদি সমস্ত ব্যর্থ হয়, তবে টেমপ্লেটে (বা মূল টেম্পলেট) আইডি = "শীর্ষ" সহ শীর্ষে কিছু খালি এইচটিএমএল উপাদান (যেমন: ডিভ) তৈরি করুন:

<div id="top"></div>

এবং উপাদান:

  ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
  }

Comments

এই সমাধানটি আমার পক্ষে কাজ করেছে (ক্রোমের পাশাপাশি এজ হিসাবেও পরীক্ষিত)। গৃহীত সমাধানটি আমার প্রকল্পের জন্য কাজ করে না (Angular5)

— রব ভ্যান

@ রোবওয়ানমিউউইন, আমার উত্তরটি যদি কাজ না করে তবে আপনি সম্ভবত এটি একইভাবে প্রয়োগ করেননি। এই সমাধানটি ডমকে ডাইরেক্টলি হেরফের করছে যা কোনওভাবেই নিরাপদ নয়

— ভেগা

@ ভেগা, এজন্যই আমি এটিকে হ্যাক বলেছি। আপনার সমাধানটি সঠিক one এখানে কিছু লোক আপনার প্রয়োগ করতে সক্ষম হয় নি তাই আমি ফ্যালব্যাক হ্যাক অফার করেছি। এই মুহুর্তে তারা যে সংস্করণে রয়েছে তার উপর ভিত্তি করে তাদের কোডটি রিফ্যাক্টর করা উচিত।

— জিওরওভার

এই সমস্ত সমাধান থেকে আমার জন্য কাজ। ধন্যবাদ জিওওভার

— রওশন

কৌণিক 6+ এর জন্য দয়া করে নিমেশ নিশারা ইন্দিমেগাদের উত্তরটি ব্যবহার করুন।

— জিওরওভার

Answer 4

এখন scrollPositionRestorationবিকল্পের সাথে কৌণিক 6.1 এ একটি বিল্ট ইন সলিউশন রয়েছে ।

দেখুন আমার উত্তর উপর রুট পরিবর্তন শীর্ষে কৌণিক 2 স্ক্রোল ।

Answer 5

যদিও @ ভেগা আপনার প্রশ্নের সরাসরি উত্তর সরবরাহ করে তবে কিছু সমস্যা রয়েছে। এটি ব্রাউজারের পিছনে / ফরোয়ার্ড বোতামটি ভেঙে দেয়। আপনি যদি ব্যবহারকারী ব্রাউজারটিকে পিছনে বা ফরোয়ার্ড বোতামটি ক্লিক করেন তবে তারা তাদের জায়গাটি হারিয়ে ফেলবে এবং শীর্ষে স্ক্রোলড হয়ে যাবে। এটি যদি আপনার ব্যবহারকারীদের কোনও লিঙ্কে পৌঁছানোর জন্য নীচে স্ক্রোল করতে হয় এবং কেবল স্ক্রোলবারটি শীর্ষে পুনরায় সেট করা হয়েছে তা খুঁজে পেতে কেবল ফিরে ক্লিক করার সিদ্ধান্ত নিয়েছে তবে এটি কিছুটা ব্যথা হতে পারে।

এখানে আমার সমস্যার সমাধান।

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}

Comments

উন্নত কোড এবং চমৎকার সমাধানের জন্য আপনাকে ধন্যবাদ। তবে কখনও কখনও @ ভেগা সমাধান আরও ভাল হয়, কারণ এটি অ্যানিমেশন এবং গতিশীল পৃষ্ঠের উচ্চতা সহ অনেক সমস্যা সমাধান করে। বিষয়বস্তু এবং সরল রাউটিং অ্যানিমেশন সহ দীর্ঘ পৃষ্ঠা থাকলে আপনার সমাধানটি ভাল। আমি অনেক অ্যানিমেশন এবং গতিশীলতা ব্লক সহ পৃষ্ঠাতে এটি চেষ্টা করে দেখছি এবং এটি এতটা ভাল লাগে না। আমি মনে করি কখনও কখনও আমরা আমাদের অ্যাপের জন্য 'ব্যাক পজিশন' ত্যাগ করতে পারি। তবে যদি তা না হয় - আমি কৌণিকের জন্য যা দেখি তা আপনি সমাধানই সেরা। আপনাকে আবারও ধন্যবাদ

— ডেনিস সাভেনকো

Answer 6

আমার ক্ষেত্রে আমি কেবল যুক্ত করেছি added

window.scroll(0,0);

মধ্যে ngOnInit()এবং তার কাজ জরিমানা।

Answer 7

কৌনিক সংস্করণ থেকে 6+ উইন্ডো.স্ক্রোল ব্যবহার করার দরকার নেই (0,0)

6+@ থেকে কৌনিক সংস্করণের জন্য রাউটারটি কনফিগার করতে বিকল্পগুলি প্রতিনিধিত্ব করে।docs

interface ExtraOptions {
  enableTracing?: boolean
  useHash?: boolean
  initialNavigation?: InitialNavigation
  errorHandler?: ErrorHandler
  preloadingStrategy?: any
  onSameUrlNavigation?: 'reload' | 'ignore'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
  anchorScrolling?: 'disabled' | 'enabled'
  scrollOffset?: [number, number] | (() => [number, number])
  paramsInheritanceStrategy?: 'emptyOnly' | 'always'
  malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  urlUpdateStrategy?: 'deferred' | 'eager'
  relativeLinkResolution?: 'legacy' | 'corrected'
}

ব্যবহার করতে পারেন scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'মধ্যে

উদাহরণ:

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'|'top' 
});

এবং যদি কোনওটিকে ম্যানুয়ালি স্ক্রোলিং নিয়ন্ত্রণ করতে হয় window.scroll(0,0) তবে অ্যাঙ্গুলার ভি 6 এর পরিবর্তে ব্যবহার করার দরকার নেই সাধারণ প্যাকেজ চালু হয়েছে ViewPortScoller।

abstract class ViewportScroller {
  static ngInjectableDef: defineInjectable({ providedIn: 'root', factory: () => new BrowserViewportScroller(inject(DOCUMENT), window) })
  abstract setOffset(offset: [number, number] | (() => [number, number])): void
  abstract getScrollPosition(): [number, number]
  abstract scrollToPosition(position: [number, number]): void
  abstract scrollToAnchor(anchor: string): void
  abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void
}

ব্যবহার বেশ সহজ সরল উদাহরণ:

import { Router } from '@angular/router';
import {  ViewportScroller } from '@angular/common'; //import
export class RouteService {

  private applicationInitialRoutes: Routes;
  constructor(
    private router: Router;
    private viewPortScroller: ViewportScroller//inject
  )
  {
   this.router.events.pipe(
            filter(event => event instanceof NavigationEnd))
            .subscribe(() => this.viewPortScroller.scrollToPosition([0, 0]));
}

Answer 8

যদি আপনার মাদুর-সিডেনাভ ব্যবহার করে রাউটার আউটলেটে কোনও আইডি দেয় (যদি আপনার পিতা বা মাতা এবং শিশু রাউটার আউটলেট থাকে) এবং এতে অ্যাক্টিভেট ফাংশন ব্যবহার করেন <router-outlet id="main-content" (activate)="onActivate($event)"> এবং শীর্ষে স্ক্রোল করতে এই 'মাদুর-সিডেনাভ-সামগ্রী' কোয়েরি নির্বাচকটি ব্যবহার করুন onActivate(event) { document.querySelector("mat-sidenav-content").scrollTo(0, 0); }

Comments

একটি ব্যবহার না করেও দুর্দান্ত কাজ করে id ( router-outletআমার অ্যাপটিতে আমার একক রয়েছে)। আমি এটি আরও 'কৌণিক উপায়ে' @ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer; onActivate() { this.sidenavContainer.scrollable.scrollTo({ left: 0, top: 0 }); }

— করেছিলাম

Answer 9

আমি AngularJS এর ​​মতো এই সমস্যার সমাধানের জন্য বিল্ট সন্ধান করছি। তবে ততক্ষণ পর্যন্ত এই সমাধানটি আমার পক্ষে কাজ করে, এটি সহজ, এবং পিছনে বোতামের কার্যকারিতা সংরক্ষণ করে।

app.componal.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.componal.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

জুরফেক্স মূল পোস্ট থেকে উত্তর

Answer 10

আপনাকে কেবল এমন একটি ফাংশন তৈরি করতে হবে যা আপনার স্ক্রিনের স্ক্রোলিংয়ের সামঞ্জস্য রাখে

উদাহরণ স্বরূপ

window.scroll(0,0) OR window.scrollTo() by passing appropriate parameter.

উইন্ডো.স্ক্রোলটো (এক্সপোস, ypos) -> প্রত্যাশিত প্যারামিটার।

Answer 11

কৌণিক 6.1 এবং পরবর্তী:

আপনি ব্যবহার করতে পারেন সমাধান সালে নির্মিত পাওয়া কৌণিক 6.1+ বিকল্প scrollPositionRestoration: 'enabled'একই অর্জন করা।

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})

কৌণিক 6.0 এবং আগের:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {

    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];

    constructor(private router: Router, private location: Location) { }

    ngOnInit() {
        this.location.subscribe((ev:PopStateEvent) => {
            this.lastPoppedUrl = ev.url;
        });
        this.router.events.subscribe((ev:any) => {
            if (ev instanceof NavigationStart) {
                if (ev.url != this.lastPoppedUrl)
                    this.yScrollStack.push(window.scrollY);
            } else if (ev instanceof NavigationEnd) {
                if (ev.url == this.lastPoppedUrl) {
                    this.lastPoppedUrl = undefined;
                    window.scrollTo(0, this.yScrollStack.pop());
                } else
                    window.scrollTo(0, 0);
            }
        });
    }
}

দ্রষ্টব্য: প্রত্যাশিত আচরণটি হ'ল আপনি যখন পৃষ্ঠায় ফিরে যান, আপনি লিঙ্কটি ক্লিক করার সময় এটি একই স্থানে স্ক্রোল হওয়া উচিত, তবে প্রতিটি পৃষ্ঠায় পৌঁছানোর সময় শীর্ষে স্ক্রোলিং করা উচিত।

Answer 12

এখানে এমন একটি সমাধান রয়েছে যা কেবলমাত্র প্রতিটি অংশের জন্য প্রথমবার পরিদর্শন করলে কেবলমাত্র কম্পোনেন্টের শীর্ষে স্ক্রোল করে (যদি আপনাকে উপাদানগুলির জন্য আলাদা আলাদা কিছু করার প্রয়োজন হয়):

প্রতিটি অংশে:

export class MyComponent implements OnInit {

firstLoad: boolean = true;

...

ngOnInit() {

  if(this.firstLoad) {
    window.scroll(0,0);
    this.firstLoad = false;
  }
  ...
}

Answer 13

export class AppComponent {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        window.scrollTo(0, 0);
      }
    });
  }

}

Answer 14

শুধু যোগ কর

window.scrollTo({ top: 0);

এনজিওনিট ()

Comments

— উইন্ডো.স্ক্রোল

Answer 15

কারও জন্য যারা স্ক্রোল ফাংশনটি সন্ধান করছেন কেবল তার জন্য ফাংশন যুক্ত করুন এবং যখন প্রয়োজন হবে তখন কল করুন

scrollbarTop(){

  window.scroll(0,0);
}

Answer 16

এটা চেষ্টা কর:

app.componal.ts

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators';
import {Subscription} from 'rxjs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
    subscription: Subscription;

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.subscription = this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => window.scrollTo(0, 0));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Answer 17

উপাদান: টেমপ্লেটে কোনও ক্রিয়া তৈরির পরিবর্তে সমস্ত রাউটিং ইভেন্টগুলিতে সাবস্ক্রাইব করুন এবং নেভিগেশন এবং বি / সি-তে স্ক্রোল করুন অন্যথায় আপনি এটি খারাপ নেভেস বা অবরুদ্ধ রুট ইত্যাদিতে গুলি চালিয়ে যাবেন ... এটি নিশ্চিতভাবে জানা আগুনের উপায় একটি রুট সাফল্যের সাথে নেভিগেট করা হয়, তারপরে সোথ স্ক্রোল। নাহলে কিছুই করবেন না।

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  router$: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router$ = this.router.events.subscribe(next => this.onRouteUpdated(next));
  }

  ngOnDestroy() {
    if (this.router$ != null) {
      this.router$.unsubscribe();
    }
  }

  private onRouteUpdated(event: any): void {
    if (event instanceof NavigationEnd) {
      this.smoothScrollTop();
    }
  }

  private smoothScrollTop(): void {
    const scrollToTop = window.setInterval(() => {
      const pos: number = window.pageYOffset;
      if (pos > 0) {
          window.scrollTo(0, pos - 20); // how far to scroll on each step
      } else {
          window.clearInterval(scrollToTop);
      }
    }, 16);
  }

}

এইচটিএমএল

<router-outlet></router-outlet>

Answer 18

এটা চেষ্টা কর

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})

এই কোডটি কৌনিক 6 <= সমর্থিত