Routerনিজেই ব্যবহার করা এমন সমস্যার কারণ হয়ে দাঁড়াবে যা সামঞ্জস্যপূর্ণ ব্রাউজারের অভিজ্ঞতা বজায় রাখতে আপনি পুরোপুরি কাটিয়ে উঠতে পারবেন না। আমার মতে সর্বোত্তম পদ্ধতিটি হ'ল কেবল একটি কাস্টম ব্যবহার করা directiveএবং এটি ক্লিক করে স্ক্রোলটি পুনরায় সেট করতে দিন। এটি সম্পর্কে ভাল কথাটি হ'ল আপনি urlযদি ক্লিক করেন সেই একই সাথে থাকেন তবে পৃষ্ঠাটি শীর্ষেও ফিরে যাবে। এটি সাধারণ ওয়েবসাইটগুলির সাথে সামঞ্জস্যপূর্ণ। বেসিকটি directiveএরকম কিছু দেখতে পারে:
import {Directive, HostListener} from '@angular/core';
@Directive({
selector: '[linkToTop]'
})
export class LinkToTopDirective {
@HostListener('click')
onClick(): void {
window.scrollTo(0, 0);
}
}
নিম্নলিখিত ব্যবহারের সাথে:
<a routerLink="/" linkToTop></a>
এটি বেশিরভাগ ব্যবহারের ক্ষেত্রে যথেষ্ট হবে তবে আমি কয়েকটি বিষয় কল্পনা করতে পারি যা এ থেকে উদ্ভূত হতে পারে:
- কাজ করে না
universalব্যবহারের কারণেwindow
- পরিবর্তন সনাক্তকরণের উপর ছোট গতির প্রভাব, কারণ এটি প্রতিটি ক্লিকের মাধ্যমে ট্রিগার হয়
- এই নির্দেশকে অক্ষম করার কোনও উপায় নেই
আসলে এই বিষয়গুলি পরাস্ত করা বেশ সহজ:
@Directive({
selector: '[linkToTop]'
})
export class LinkToTopDirective implements OnInit, OnDestroy {
@Input()
set linkToTop(active: string | boolean) {
this.active = typeof active === 'string' ? active.length === 0 : active;
}
private active: boolean = true;
private onClick: EventListener = (event: MouseEvent) => {
if (this.active) {
window.scrollTo(0, 0);
}
};
constructor(@Inject(PLATFORM_ID) private readonly platformId: Object,
private readonly elementRef: ElementRef,
private readonly ngZone: NgZone
) {}
ngOnDestroy(): void {
if (isPlatformBrowser(this.platformId)) {
this.elementRef.nativeElement.removeEventListener('click', this.onClick, false);
}
}
ngOnInit(): void {
if (isPlatformBrowser(this.platformId)) {
this.ngZone.runOutsideAngular(() =>
this.elementRef.nativeElement.addEventListener('click', this.onClick, false)
);
}
}
}
এটি সক্রিয় / নিষ্ক্রিয় করার সুবিধার্থে মৌলিক ক্ষেত্রে একই ব্যবহার সহ বেশিরভাগ ব্যবহারের ক্ষেত্রে বিবেচনা করে:
<a routerLink="/" linkToTop></a> <!-- always active -->
<a routerLink="/" [linkToTop]="isActive"> <!-- active when `isActive` is true -->
বিজ্ঞাপন, আপনি বিজ্ঞাপন করতে চান না পড়ুন
ব্রাউজার passiveইভেন্টগুলি সমর্থন করে কিনা তা পরীক্ষা করার জন্য আরেকটি উন্নতি করা যেতে পারে । এটি কোডটিকে আরও কিছুটা জটিল করে তুলবে এবং আপনি যদি নিজের কাস্টম দিকনির্দেশনা / টেম্পলেটগুলিতে এই সমস্ত প্রয়োগ করতে চান তবে কিছুটা অস্পষ্ট is এই কারণেই আমি একটি ছোট লাইব্রেরি লিখেছিলাম যা আপনি এই সমস্যাগুলি সমাধান করতে ব্যবহার করতে পারেন। উপরের মতো একই কার্যকারিতা এবং যুক্ত passiveইভেন্টের সাথে, আপনি যদি ng-event-optionsলাইব্রেরিটি ব্যবহার করেন তবে আপনি এটিতে আপনার নির্দেশিকা পরিবর্তন করতে পারেন can click.pnbশ্রোতার ভিতরে যুক্তিটি রয়েছে :
@Directive({
selector: '[linkToTop]'
})
export class LinkToTopDirective {
@Input()
set linkToTop(active: string|boolean) {
this.active = typeof active === 'string' ? active.length === 0 : active;
}
private active: boolean = true;
@HostListener('click.pnb')
onClick(): void {
if (this.active) {
window.scrollTo(0, 0);
}
}
}
RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })