আমি router.navigateকিছু প্রশ্নের স্ট্রিং প্যারামিটার সহ একই পৃষ্ঠায় কল করছি । এই ক্ষেত্রে, ngOnInit()কল না। এটি কি পূর্বনির্ধারিত বা আমার অন্য কিছু যুক্ত করার দরকার আছে?
আমি router.navigateকিছু প্রশ্নের স্ট্রিং প্যারামিটার সহ একই পৃষ্ঠায় কল করছি । এই ক্ষেত্রে, ngOnInit()কল না। এটি কি পূর্বনির্ধারিত বা আমার অন্য কিছু যুক্ত করার দরকার আছে?
উত্তর:
আপনি ইনজেক্ট করতে পারেন ActivatedRouteএবং সাবস্ক্রাইব করতে পারেনparams
constructor(route:ActivatedRoute) {
route.params.subscribe(val => {
// put the code from `ngOnInit` here
});
}
রাউটারটি কেবল যখন উপাদানটি অন্য কোনও রুটে নেভিগেট করে তখন উপাদানটি ধ্বংস করে এবং পুনরায় তৈরি করে। যখন কেবল রুটের প্যারাম বা ক্যোয়ারী প্যারামগুলি আপডেট হয় তবে রুটটি একই হয়, উপাদানটি ধ্বংস হবে এবং পুনরায় তৈরি করা হবে না।
উপাদানটিকে পুনরায় তৈরি করতে বাধ্য করার বিকল্প উপায় হ'ল একটি কাস্টম পুনরায় ব্যবহার কৌশল। একই ইউআরএল যখন বিভিন্ন পরামিতিগুলি লোড হয় তখন আবার কৌণিক 2 রাউটার 2.0.0 অংশগুলি পুনরায় লোড হচ্ছে না? (কীভাবে এটি বাস্তবায়ন করা যায় সে সম্পর্কে এখনও তেমন কোনও তথ্য উপলব্ধ নেই বলে মনে হয়)
আপনি রাউটারে পুনঃব্যবহার্য স্থির করতে পারেন।
constructor(private router: Router) {
// override the route reuse strategy
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
};
}
onSameUrlNavigation: 'reload'তাই মত কনফিগ বস্তু: RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})। যদিও অন্য কোনও কৌণিক সংস্করণের জন্য কৌতুক করবেন না।
আমি নিম্নলিখিতটি ব্যবহার করেছি এবং এটি কাজ করেছে।
onButtonClick() {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
}
this.router.onSameUrlNavigation = 'reload';
this.router.navigate('/myroute', { queryParams: { index: 1 } });
}
navigate()?
আপনার সম্ভবত পৃষ্ঠাটি পুনরায় লোড করার দরকার আছে? এটি আমার সমাধান: আমি @ এনজিএমডিউল পরিবর্তন করেছি ( আমার ক্ষেত্রে অ্যাপ-রাউটিং.মডিউল.টস ফাইল):
@NgModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})] })
NgOnInitযখন একটি উদাহরণ তৈরি করা হবে একবার কল করা হবে। একই উদাহরণ NgOnInitহিসাবে আবার কল করা হবে না। এটিকে ডাকার জন্য এটি তৈরি করা দৃষ্টান্তটি ধ্বংস করা প্রয়োজন।
আপনার নেভিগেশন পদ্ধতিতে,
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/document'], {queryParams: {"search": currentSearch}});
আমার একই সমস্যা ছিল, অতিরিক্তভাবে আমি সতর্কতা পেয়েছি:
did you forget to call `ngZone.run()`
এই সাইটটি সেরা সমাধান সরবরাহ করেছে:
import { Router } from '@angular/router';
import { NgZone } from '@angular/core';
...
constructor(
private ngZone:NgZone,
private _router: Router
){ }
redirect(to) {
// call with ngZone, so that ngOnOnit of component is called
this.ngZone.run(()=>this._router.navigate([to]));
}
এই সমস্যাটি সম্ভবত এই বাস্তবতা থেকে আসছে যে আপনি এনজিওএনডেস্ট্রয় ব্যবহার করে আপনার সদস্যতাগুলি বন্ধ করছেন না। কীভাবে করা যায় তা এখানে।
নিম্নলিখিত rxjs সাবস্ক্রিপশন আমদানি আনুন।
import { Subscription } from 'rxjs/Subscription';
আপনার কৌনিক কোর আমদানিতে অনডেস্টরি যুক্ত করুন।
import { Component, OnDestroy, OnInit } from '@angular/core';
আপনার এক্সপোর্ট ক্লাসে অনডেস্টরি যুক্ত করুন।
export class DisplayComponent implements OnInit, OnDestroy {
উপাদানটির প্রতিটি সাবস্ক্রিপশনের জন্য আপনার এক্সপোর্ট ক্লাসের অধীনে আরএক্সজেএস থেকে সাবস্ক্রিপশনের মান সহ একটি অবজেক্ট সম্পত্তি তৈরি করুন।
myVariable: Subscription;
আপনার সাবস্ক্রিপশনের মান MyVariable: সাবস্ক্রিপশনে সেট করুন।
this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});
তারপরে এনজিওনাইটের নীচের অংশে এনজিওনডেস্টোরি () লাইফ চক্র হুক রাখুন এবং আপনার সাবস্ক্রিপশনের জন্য আপনার সদস্যতা রোধের বিবৃতি দিন। আপনার যদি একাধিক থাকে তবে আরও যুক্ত করুন
ngOnDestroy() {
this.myVariable.unsubscribe();
}
ngOnDestoryপরিবর্তেও টাইপ করতে ngOnDestroyথাকি ;-)
এখানে আরও তথ্যের সাথে এই পৃষ্ঠায় সেরা ধারণাগুলির একটি সংগ্রহ রয়েছে
সমাধান 1 - প্যারাম সাবস্ক্রিপশন ব্যবহার করুন:
টিউটোরিয়াল: https://angular-2-training-book.rangle.io/routing/routeparams#reading-route-paraters
দস্তাবেজ: https://angular.io/api/router/ActivatedRoute#params
আপনার প্রতিটি রাউটিং উপাদান যা প্যারাম ভেরিয়েবল ব্যবহার করে সেগুলিতে নিম্নলিখিতটি অন্তর্ভুক্ত থাকে:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
// ...
@Component({
// ...
})
export class MyComponent implements OnInit, OnDestroy {
paramsSub: Subscription;
// ...
constructor(activeRoute: ActivatedRoute) {
}
public ngOnInit(): void {
// ...
this.paramsSub = this.activeRoute.params.subscribe(val => {
// Handle param values here
});
// ...
}
// ...
public ngOnDestroy(): void {
// Prevent memory leaks
this.paramsSub.unsubscribe();
}
}
এই কোডটির সাথে কিছু সাধারণ সমস্যা হ'ল সাবস্ক্রিপশনগুলি অ্যাসিনক্রোনাস এবং এটি মোকাবেলা করার জন্য কৌশলযুক্ত হতে পারে। এছাড়াও আপনি এনজিওডেস্ট্রয় সাবস্ক্রাইব করতে ভুলবেন না অন্যথায় খারাপ জিনিসগুলি ঘটতে পারে।
ভাল জিনিস হ'ল এই সমস্যাটি পরিচালনা করার জন্য এটি সবচেয়ে নথিভুক্ত এবং সাধারণ উপায়। আপনি এই পৃষ্ঠায় প্রতিবার দেখার সময় প্রতিবার টেমপ্লেটটি ধ্বংস এবং পুনরুদ্ধার করার পরিবর্তে টেম্পলেটটি পুনরায় ব্যবহার করছেন এমনভাবে এটির একটি পারফরম্যান্স উন্নতিও ঘটছে।
সমাধান 2 - উচিতআমি ব্যবহার করুন / অন সেমউরাল নেভিগেশন:
দস্তাবেজ: https://angular.io/api/router/ExtraOptions#onSameUrl নেভিগেশন
দস্তাবেজ: https://angular.io/api/router/RouteReuseStrategy#shouldReuseRoute
দস্তাবেজ: https://angular.io/api/router/ActtivatedRouteSnapshot#params
RouterModule.forRootআপনার প্রকল্পে কোথায় অবস্থিত তা সন্ধান করুন (সাধারণত অ্যাপ-রাউটিং.মডিউল.টস বা অ্যাপ্লিকেশন.মডিউল.টগুলিতে পাওয়া যায়):
const routes: Routes = [
// ...
];
// ...
@NgModule({
imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
})],
exports: [RouterModule]
})
তারপরে অ্যাপকোম্পোন্টে নিম্নলিখিতগুলি যুক্ত করুন:
import { Component, OnInit} from '@angular/core';
import { Router } from '@angular/router';
// ...
@Component({
// ...
})
export class AppComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
// Allows for ngOnInit to be called on routing to the same routing Component since we will never reuse a route
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
};
// ...
}
// ...
}
সর্বশেষে, আপনার রাউটিং উপাদানগুলিতে আপনি এখন এই জাতীয় প্যারাম ভেরিয়েবলগুলি পরিচালনা করতে পারবেন:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
// ...
@Component({
// ...
})
export class MyComponent implements OnInit {
// ...
constructor(activeRoute: ActivatedRoute) {
}
public ngOnInit(): void {
// Handle params
const params = +this.activeRoute.snapshot.params;
// ...
}
// ...
}
এই সমাধান সহ সাধারণ সমস্যাগুলি হ'ল এটি সাধারণ নয়। এছাড়াও আপনি কৌণিক কাঠামোর ডিফল্ট আচরণ পরিবর্তন করছেন, যাতে আপনি সাধারণত যে বিষয়গুলিতে লোকেদের মধ্যে চালিত না হয় সেগুলিতে চলে যেতে পারেন।
ভাল জিনিস হ'ল আপনার সমস্ত কোড সিঙ্ক্রোনাস এবং বুঝতে সহজ।
আপনার এনজিওএনআইনেট কোডটি এনজিএফটারভিউআইনিটিতে স্থানান্তরিত করার বিষয়ে বিবেচনা করুন। পরেরটি রাউটার নেভিগেশনে ডাকা হয়েছিল বলে মনে হচ্ছে এবং এই ক্ষেত্রে আপনাকে সহায়তা করা উচিত।