আমি আমার অ্যাঙ্গুলার 2 পৃষ্ঠায় কিছু লিঙ্ক যুক্ত করতে চাই, যে ক্লিক করার পরে সেই পৃষ্ঠাটির মধ্যে নির্দিষ্ট অবস্থানগুলিতে চলে যাবে , যেমন সাধারণ হ্যাশট্যাগগুলি করে। সুতরাং লিঙ্কগুলি কিছু হবে
/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes
প্রভৃতি
আমি মনে করি না যে আমার হ্যাশলোকেশনস্ট্রেজি দরকার, কারণ আমি সাধারণ অ্যাঙ্গুলার 2 উপায়ের সাথে ভাল আছি, তবে আমি যদি সরাসরি যুক্ত করি তবে লিঙ্কটি আসলে একই পৃষ্ঠায় কোথাও নয়, মূলটিতে চলে যাবে। কোন দিক প্রশংসা করা হয়, ধন্যবাদ।
উত্তর:
হালনাগাদ
এটি এখন সমর্থিত
<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>this._router.navigate( ['/somepath', id ], {fragment: 'test'});আপনার উপাদানটিতে স্ক্রোল করতে কোডের নীচে যুক্ত করুন
import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import
private fragment: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
}
ngAfterViewInit(): void {
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) { }
}
মূল
এটি একটি পরিচিত সমস্যা এবং https://github.com/angular/angular/issues/6595 এ ট্র্যাক করা
01বা 100সিএসএসের বৈধ নির্বাচক নয়। আপনি এটি একটি বৈধ নির্বাচনকারী করতে কোনও চিঠি বা কিছু যুক্ত করতে চাইতে পারেন। সুতরাং আপনি এখনও 01একটি খণ্ড হিসাবে পাস হবে , কিন্তু এর idমতো কিছু হওয়া দরকার d01এবং document.querySelector('#d'+id)এটি মিলবে।
গন্টারের উত্তর সঠিক হলেও এটি অ্যাঙ্কর ট্যাগ অংশটি "জাম্প টু" কভার করে না ।
অতএব, অতিরিক্ত হিসাবে:
<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>
this._router.navigate( ['/somepath', id ], {fragment: 'test'});
... উপাদান (পিতামাতার) যেখানে আপনার "লাফাতে" আচরণের প্রয়োজন সেখানে যুক্ত করুন:
import { Router, NavigationEnd } from '@angular/router';
class MyAppComponent {
constructor(router: Router) {
router.events.subscribe(s => {
if (s instanceof NavigationEnd) {
const tree = router.parseUrl(router.url);
if (tree.fragment) {
const element = document.querySelector("#" + tree.fragment);
if (element) { element.scrollIntoView(true); }
}
}
});
}
}
অনুগ্রহ করে নোট করুন যে এটি একটি কার্যবিবরণী ! ভবিষ্যতের আপডেটের জন্য এই গিথুব ইস্যুটি অনুসরণ করুন । সমাধান সরবরাহ করার জন্য ক্রেডিট ভিক্টর সাভকিনকে !
"['../faq']"মান হিসাবে দিতে হবে অন্যথায় এটি / FAQ / FAQ / # অ্যাঙ্কারে ঝাঁপ দেওয়ার চেষ্টা করবে, / FAQ / # অ্যাঙ্কারের ইনস্টেফ। এটি কি এটি করার সঠিক উপায় বা রাউটারলিংকের বর্তমান পৃষ্ঠার উল্লেখ করার জন্য আরও কি মার্জিত উপায় আছে? এছাড়াও, document.querySelector("#" + tree.fragment);আমাকে একটি বৈধ নির্বাচকের ত্রুটি দেয়। আপনি কি নিশ্চিত যে এটি সঠিক? ধন্যবাদ
<a [routerLink]="['/faq']" fragment="section6">?
কিছুটা দেরিতে উত্তর দেওয়ার জন্য দুঃখিত; অ্যাঙ্গুলার রাউটিং ডকুমেন্টেশনে একটি পূর্বনির্ধারিত ফাংশন রয়েছে যা হ্যাশট্যাগের সাথে পৃষ্ঠা অ্যাঙ্কর অর্থাৎ অ্যাঙ্করস্ক্রোলিংয়ে 'রাউন্ড' করতে সহায়তা করে helps
পদক্ষেপ -১: - প্রথমে app.module.ts ফাইলে রাউটারমডুল আমদানি করুন: -
imports:[
BrowserModule,
FormsModule,
RouterModule.forRoot(routes,{
anchorScrolling: 'enabled'
})
],
পদক্ষেপ -২: - এইচটিএমএল পৃষ্ঠায় যান, নেভিগেশন তৈরি করুন এবং ডিভ আইডির সাথে মেলে সম্পর্কিত দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য [রাউটারলিঙ্ক] এবং খণ্ড যুক্ত করুন : -
<ul>
<li> <a [routerLink] = "['/']" fragment="home"> Home </a></li>
<li> <a [routerLink] = "['/']" fragment="about"> About Us </a></li>
<li> <a [routerLink] = "['/']" fragment="contact"> Contact Us </a></li>
</ul>
পদক্ষেপ -3: - খণ্ডের সাথে আইডি নামের সাথে মিল রেখে একটি বিভাগ / ভাগ তৈরি করুন : -
<section id="home" class="home-section">
<h2> HOME SECTION </h2>
</section>
<section id="about" class="about-section">
<h2> ABOUT US SECTION </h2>
</section>
<section id="contact" class="contact-section">
<h2> CONTACT US SECTION </h2>
</section>
আপনার রেফারেন্সের জন্য, আমি নীচের উদাহরণটি একটি ছোট ডেমো তৈরি করে যুক্ত করেছি যা আপনার সমস্যা সমাধানে সহায়তা করে।
scrollPositionRestoration: 'enabled',anchorScrolling বিকল্প অধীনে :)
কিছুটা দেরি হলেও এখানে একটি উত্তর পেয়েছি যা কাজ করে:
<a [routerLink]="['/path']" fragment="test" (click)="onAnchorClick()">Anchor</a>
এবং উপাদানটিতে:
constructor( private route: ActivatedRoute, private router: Router ) {}
onAnchorClick ( ) {
this.route.fragment.subscribe ( f => {
const element = document.querySelector ( "#" + f )
if ( element ) element.scrollIntoView ( element )
});
}
যদি আপনি ইতিমধ্যে কোনও অ্যাঙ্কর সহ কোনও পৃষ্ঠায় অবতরণ করেন তবে উপরের সমাধানটি স্বয়ংক্রিয়ভাবে ভিউতে স্ক্রোল করে না, তাই আমি উপরের সমাধানটি আমার এনজিআইনেটে ব্যবহার করেছি যাতে এটি সেই সাথে কাজ করতে পারে:
ngOnInit() {
this.router.events.subscribe(s => {
if (s instanceof NavigationEnd) {
const tree = this.router.parseUrl(this.router.url);
if (tree.fragment) {
const element = document.querySelector("#" + tree.fragment);
if (element) { element.scrollIntoView(element); }
}
}
});
}
আপনার উপাদানটির শুরুতে রাউটার, অ্যাক্টিভেটেড রুট এবং নেভিগেশন এবং আমদানি করার বিষয়টি নিশ্চিত করুন এবং এটি করা ভাল।
document.querySelector ( "#" + f )আমাকে ত্রুটি দেয় কারণ এটি কোনও নির্বাচককে প্রত্যাশা করে, স্ট্রিং নয়।
element.scrollIntoView()এটি কাজ করে: ( ফাংশনটিতে elementনা গিয়ে)। এটা মসৃণ করা, এই ব্যবহার করুন: element.scrollIntoView({block: "end", behavior: "smooth"})।
onAnchorClick(), আমরা scrollIntoView করার জন্য একটি বুলিয়ান পাস করতে হবে: if (element) { element.scrollIntoView(true); }। এখন আমি একই লিঙ্কটিতে দু'বার ক্লিক করতে এবং স্ক্রোলের কাজগুলি করতে পারি
পূর্ববর্তী উত্তরগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। শেষ খাদের প্রচেষ্টায় আমি আমার টেম্পলেটটিতে চেষ্টা করেছি:
<a (click)="onClick()">From Here</a>
<div id='foobar'>To Here</div>
এটি আমার .ts এ:
onClick(){
let x = document.querySelector("#foobar");
if (x){
x.scrollIntoView();
}
}
এবং এটি অভ্যন্তরীণ লিঙ্কগুলির জন্য প্রত্যাশার মতো কাজ করে। এটি আসলে অ্যাঙ্কর ট্যাগ ব্যবহার করে না তাই এটি URL টি মোটেই স্পর্শ করবে না।
উপরের সমাধানগুলি আমার পক্ষে কার্যকর হয়নি ... এটি এটি করেছে:
প্রথমে, এনজিএফটারভিউ চেকড () এMyAppComponent স্বয়ংক্রিয়ভাবে স্ক্রোলিংয়ের জন্য প্রস্তুত করুন ...
import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
@Component( {
[...]
} )
export class MyAppComponent implements OnInit, AfterViewChecked {
private scrollExecuted: boolean = false;
constructor( private activatedRoute: ActivatedRoute ) {}
ngAfterViewChecked() {
if ( !this.scrollExecuted ) {
let routeFragmentSubscription: Subscription;
// Automatic scroll
routeFragmentSubscription =
this.activatedRoute.fragment
.subscribe( fragment => {
if ( fragment ) {
let element = document.getElementById( fragment );
if ( element ) {
element.scrollIntoView();
this.scrollExecuted = true;
// Free resources
setTimeout(
() => {
console.log( 'routeFragmentSubscription unsubscribe' );
routeFragmentSubscription.unsubscribe();
}, 1000 );
}
}
} );
}
}
}তারপরে, হ্যাশট্যাগ my-app-routeপ্রেরণে নেভিগেট করুনprodID
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component( {
[...]
} )
export class MyOtherComponent {
constructor( private router: Router ) {}
gotoHashtag( prodID: string ) {
this.router.navigate( [ '/my-app-route' ], { fragment: prodID } );
}
}অন্যান্য সমস্ত উত্তর কৌনিক সংস্করণ <6.1 এ কাজ করবে। তবে আপনি যদি সর্বশেষতম সংস্করণটি পেয়ে থাকেন তবে অ্যাংুলার সমস্যাটি স্থির করে নিয়েছে বলে আপনাকে এই কুৎসিত হ্যাকগুলি করার প্রয়োজন হবে না।
আপনাকে যা করতে হবে তা হ'ল পদ্ধতির scrollOffsetদ্বিতীয় যুক্তির বিকল্পটি সেট করে RouterModule.forRoot।
@NgModule({
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
scrollOffset: [0, 64] // [x, y]
})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
এতে রাউটার মডিউলটির জন্য এটি ব্যবহার করুন app-routing.module.ts:
@NgModule({
imports: [RouterModule.forRoot(routes, {
useHash: true,
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
scrollOffset: [0, 64]
})],
exports: [RouterModule]
})
এটি আপনার এইচটিএমএলে থাকবে:
<a href="#/users/123#userInfo">
এইচটিএমএল ফাইলটিতে:
<a [fragment]="test1" [routerLink]="['./']">Go to Test 1 section</a>
<section id="test1">...</section>
<section id="test2">...</section>টিএস ফাইলে:
export class PageComponent implements AfterViewInit, OnDestroy {
private destroy$$ = new Subject();
private fragment$$ = new BehaviorSubject<string | null>(null);
private fragment$ = this.fragment$$.asObservable();
constructor(private route: ActivatedRoute) {
this.route.fragment.pipe(takeUntil(this.destroy$$)).subscribe(fragment => {
this.fragment$$.next(fragment);
});
}
public ngAfterViewInit(): void {
this.fragment$.pipe(takeUntil(this.destroy$$)).subscribe(fragment => {
if (!!fragment) {
document.querySelector('#' + fragment).scrollIntoView();
}
});
}
public ngOnDestroy(): void {
this.destroy$$.next();
this.destroy$$.complete();
}
}যেহেতু খণ্ডিত সম্পত্তি এখনও অ্যাঙ্কর স্ক্রোলিং সরবরাহ করে না, এই কাজটি আমার পক্ষে কৌশলটি করেছে:
<div [routerLink]="['somepath']" fragment="Test">
<a href="#Test">Jump to 'Test' anchor </a>
</div>
কল্যাণের উত্তরে যোগ করা , এই সাবস্ক্রিপশনটি রাউটারের সাথে আবদ্ধ এবং পৃষ্ঠাটি পুরোপুরি রিফ্রেশ না হওয়া পর্যন্ত বেঁচে থাকবে। কোনও উপাদানটিতে রাউটার ইভেন্টগুলি সাবস্ক্রাইব করার সময়, এনজিওডেস্ট্রয়ে সাবস্ক্রাইব করতে ভুলবেন না:
import { OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from "rxjs/Rx";
class MyAppComponent implements OnDestroy {
private subscription: Subscription;
constructor(router: Router) {
this.subscription = router.events.subscribe(s => {
if (s instanceof NavigationEnd) {
const tree = router.parseUrl(router.url);
if (tree.fragment) {
const element = document.querySelector("#" + tree.fragment);
if (element) { element.scrollIntoView(element); }
}
}
});
}
public ngOnDestroy() {
this.subscription.unsubscribe();
}
}
আমি এই কাজটি আমার নিজের ওয়েবসাইটে পেয়েছি, সুতরাং আমি বুঝতে পেরেছিলাম যে এখানে আমার সমাধান পোস্ট করা ভাল।
<a [routerLink]="baseUrlGoesHere" fragment="nameOfYourAnchorGoesHere">Link Text!</a>
<a name="nameOfYourAnchorGoesHere"></a>
<div>They're trying to anchor to me!</div>
এবং তারপরে আপনার উপাদানগুলিতে, নিশ্চিত হয়ে নিন যে আপনি এটি অন্তর্ভুক্ত করেছেন:
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
this.route.fragment.subscribe ( f => {
const element = document.querySelector ( "#" + f )
if ( element ) element.scrollIntoView ( element )
});
}
element.scrollIntoView()বা লিখলে ভাল হয় element.scrollIntoView(true)। আপনার সংস্করণটি আমার জন্য সংকলন করেনি (সম্ভবত কঠোর নল চেকের কারণে?)।
সমস্ত সমাধানগুলি পড়ার পরে, আমি একটি উপাদান অনুসন্ধান করেছি এবং আমি একটি পাই যা মূল প্রশ্নটি যা অনুরোধ করেছিল ঠিক তাই করে: অ্যাঙ্কর লিঙ্কগুলিতে স্ক্রোলিং। https://www.npmjs.com/package/ng2-scroll-to
আপনি এটি ইনস্টল করার সময়, আপনি সিনট্যাক্স যেমন:
// app.awesome.component.ts
@Component({
...
template: `...
<a scrollTo href="#main-section">Scroll to main section</a>
<button scrollTo scrollTargetSelector="#test-section">Scroll to test section</a>
<button scrollTo scrollableElementSelector="#container" scrollYTarget="0">Go top</a>
<!-- Further content here -->
<div id="container">
<section id="main-section">Bla bla bla</section>
<section id="test-section">Bla bla bla</section>
<div>
...`,
})
export class AwesomeComponent {
}
এটি আমার পক্ষে সত্যই ভাল কাজ করেছে।
কোনও সহজ সমাধান যা কোনও ক্যোয়ারী প্যারামিটার ছাড়াই পৃষ্ঠাগুলির জন্য কাজ করে, তা ব্রাউজারের পিছনে / ফরোয়ার্ড, রাউটার এবং গভীর-সংযোগকারী l
<a (click)="jumpToId('anchor1')">Go To Anchor 1</a>
ngOnInit() {
// If your page is dynamic
this.yourService.getWhatever()
.then(
data => {
this.componentData = data;
setTimeout(() => this.jumpToId( window.location.hash.substr(1) ), 100);
}
);
// If your page is static
// this.jumpToId( window.location.hash.substr(1) )
}
jumpToId( fragment ) {
// Use the browser to navigate
window.location.hash = fragment;
// But also scroll when routing / deep-linking to dynamic page
// or re-clicking same anchor
if (fragment) {
const element = document.querySelector('#' + fragment);
if (element) element.scrollIntoView();
}
}
সময়সীমাটি হ'ল পৃষ্ঠাকে কোনও * ngIf দ্বারা "সুরক্ষিত" কোনও গতিশীল ডেটা লোড করার অনুমতি দেওয়া। রুট পরিবর্তন করার সময় এটি পৃষ্ঠার শীর্ষে স্ক্রোল করতেও ব্যবহার করা যেতে পারে - কেবলমাত্র একটি ডিফল্ট শীর্ষ অ্যাঙ্কর ট্যাগ সরবরাহ করুন।
যদি এই উপাদানগুলির আইডিগুলি ইউআরএলতে যুক্ত করা কোনও বিষয় না হয় তবে আপনার এই লিঙ্কটি একবার দেখে নেওয়া উচিত:
কৌণিক 2 - বর্তমান পৃষ্ঠায় উপাদানটির অ্যাঙ্কর লিংক
// html
// add (click) event on element
<a (click)="scroll({{any-element-id}})">Scroll</a>
// in ts file, do this
scroll(sectionId) {
let element = document.getElementById(sectionId);
if(element) {
element.scrollIntoView(); // scroll to a particular element
}
}জাভিয়ারফুয়েন্তস উত্তরের উল্লেখ সহকারে এখানে আরও একটি আলোচনা করা হয়েছে:
<a [routerLink]="['self-route', id]" fragment="some-element" (click)="gotoHashtag('some-element')">Jump to Element</a>
লিপিতে:
import {ActivatedRoute} from "@angular/router";
import {Subscription} from "rxjs/Subscription";
export class Links {
private scrollExecuted: boolean = false;
constructor(private route: ActivatedRoute) {}
ngAfterViewChecked() {
if (!this.scrollExecuted) {
let routeFragmentSubscription: Subscription;
routeFragmentSubscription = this.route.fragment.subscribe(fragment => {
if (fragment) {
let element = document.getElementById(fragment);
if (element) {
element.scrollIntoView();
this.scrollExecuted = true;
// Free resources
setTimeout(
() => {
console.log('routeFragmentSubscription unsubscribe');
routeFragmentSubscription.unsubscribe();
}, 0);
}
}
});
}
}
gotoHashtag(fragment: string) {
const element = document.querySelector("#" + fragment);
if (element) element.scrollIntoView(element);
}
}
এটি যদি ইউআরএল-এ হ্যাশট্যাগযুক্ত পৃষ্ঠাটিতে সরাসরি অবতরণ করে তবে এটি ব্যবহারকারীকে সরাসরি উপাদানটিতে স্ক্রোল করতে দেয়।
তবে এই ক্ষেত্রে, আমি রুট টুকরাটি সাবস্ক্রাইব করেছি ngAfterViewCheckedতবে ngAfterViewChecked()প্রতি প্রতি একটানা বলা হয়ে থাকে ngDoCheckএবং এটি ব্যবহারকারীকে শীর্ষে ফিরে স্ক্রোল করতে দেয় না, সুতরাং routeFragmentSubscription.unsubscribeভিউ এলিমেন্টে স্ক্রোল করার পরে 0 মিলিসের টাইম আউট করার পরে ডাকা হয়।
gotoHashtagব্যবহারকারী যখন অ্যাঙ্কার ট্যাগটিতে সুনির্দিষ্টভাবে ক্লিক করেন তখন অতিরিক্তভাবে পদ্ধতিটিকে স্ক্রোল করতে সংজ্ঞায়িত করা হয়।
হালনাগাদ:
যদি ইউআরএলটিতে ক্যোরিস্ট্রিং [routerLink]="['self-route', id]"থাকে তবে অ্যাঙ্কারে ক্যোরিস্ট্রিংগুলি সংরক্ষণ করা হবে না। আমি একই জন্য কাজ অনুসরণ চেষ্টা:
<a (click)="gotoHashtag('some-element')">Jump to Element</a>
constructor( private route: ActivatedRoute,
private _router:Router) {
}
...
...
gotoHashtag(fragment: string) {
let url = '';
let urlWithSegments = this._router.url.split('#');
if(urlWithSegments.length){
url = urlWithSegments[0];
}
window.location.hash = fragment;
const element = document.querySelector("#" + fragment);
if (element) element.scrollIntoView(element);
}
এই আমার জন্য কাজ !! এই এনজিওর জন্য এটি গতিশীলভাবে অ্যাঙ্কর ট্যাগ, আপনি তাদের রেন্ডার অপেক্ষা করতে হবে
এইচটিএমএল:
<div #ngForComments *ngFor="let cm of Comments">
<a id="Comment_{{cm.id}}" fragment="Comment_{{cm.id}}" (click)="jumpToId()">{{cm.namae}} Reply</a> Blah Blah
</div>
আমার টিএস ফাইল:
private fragment: string;
@ViewChildren('ngForComments') AnchorComments: QueryList<any>;
ngOnInit() {
this.route.fragment.subscribe(fragment => { this.fragment = fragment;
});
}
ngAfterViewInit() {
this.AnchorComments.changes.subscribe(t => {
this.ngForRendred();
})
}
ngForRendred() {
this.jumpToId()
}
jumpToId() {
let x = document.querySelector("#" + this.fragment);
console.log(x)
if (x){
x.scrollIntoView();
}
}
এটি ViewChildren, QueryListইত্যাদি আমদানি করতে ভুলবেন না এবং কিছু নির্মাণকারী যুক্ত করুন ActivatedRoute!!
অন্যান্য উত্তরগুলির মতো নয় তবে আমি focus()পাশাপাশি যুক্ত করব scrollIntoView()। এছাড়াও setTimeoutইউআরএল পরিবর্তন করার সময় এটি শীর্ষে চলে আসে বলে আমি ব্যবহার করছি to এটির কারণ কী তা নিশ্চিত নয় তবে এটি মনে হয় setTimeoutকাজটি অবিচল।
উত্স:
<a [routerLink] fragment="some-id" (click)="scrollIntoView('some-id')">Jump</a>
গন্তব্য:
<a id="some-id" tabindex="-1"></a>
টাইপ করা বিষয়:
scrollIntoView(anchorHash) {
setTimeout(() => {
const anchor = document.getElementById(anchorHash);
if (anchor) {
anchor.focus();
anchor.scrollIntoView();
}
});
}
আমারো একই ইস্যু ছিল. সমাধান: দেখুন পোর্টটি স্ক্রোলার ব্যবহার করে https://angular.io/api/common/ ভিউপোর্টপোর্টক্রোলার#scroltoanchor
- অ্যাপ-রাউটিং.মডিউল.ট কোড:
import { PageComponent } from './page/page.component';
const routes: Routes = [
path: 'page', component: PageComponent },
path: 'page/:id', component: PageComponent }
];
- উপাদান এইচটিএমএল
<a (click) = "scrollTo('typeExec')">
<mat-icon>lens</mat-icon>
</a>
- উপাদানটির কোড:
import { Component } from '@angular/core';
import { ViewportScroller } from '@angular/common';
export class ParametrageComponent {
constructor(private viewScroller: ViewportScroller) {}
scrollTo(tag : string)
{
this.viewScroller.scrollToAnchor(tag);
}
}
আমি সবেমাত্র এনএমপি - এনজিএক্স-স্ক্রোল- টুতে পাওয়া খুব দরকারী প্লাগইন পরীক্ষা করেছি , যা আমার পক্ষে দুর্দান্ত কাজ করে। তবে এটি কৌণিক 4+ এর জন্য ডিজাইন করা হয়েছে তবে সম্ভবত কেউ উত্তরটি সহায়ক বলে মনে করবে।
আমি এই সমাধানগুলির বেশিরভাগ ক্ষেত্রে চেষ্টা করেছিলাম কিন্তু ছেড়ে চলে এসে অন্য টুকরোটি নিয়ে ফিরে এসে সমস্যা দেখা দিয়েছে যা কাজ করবে না, তাই আমি কিছুটা আলাদা কিছু করেছি যা 100% কাজ করে এবং URL এ কুৎসিত হ্যাশ থেকে মুক্তি পেয়ে যায়।
tl; ডাঃ আমি এখন পর্যন্ত যা দেখলাম তার চেয়ে আরও ভাল উপায়।
import { Component, OnInit, AfterViewChecked, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.scss']
})
export class HeroComponent implements OnInit, AfterViewChecked, OnDestroy {
private fragment: string;
fragSub: Subscription;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.fragSub = this.route.fragment.subscribe( fragment => { this.fragment = fragment; })
}
ngAfterViewChecked(): void {
try {
document.querySelector('#' + this.fragment).scrollIntoView({behavior: 'smooth'});
window.location.hash = "";
} catch (e) { }
}
ngOnDestroy() {
this.fragSub.unsubscribe();
}
}
123প্রশ্নে কী আছে) ধরে{ path: 'users/:id', ....}