मैं router.navigateकुछ क्वेरी स्ट्रिंग मापदंडों के साथ एक ही पृष्ठ पर कॉल कर रहा हूं । इस मामले में, ngOnInit()कॉल नहीं करता है। क्या यह डिफ़ॉल्ट रूप से है या मुझे कुछ और जोड़ने की आवश्यकता है?
मैं router.navigateकुछ क्वेरी स्ट्रिंग मापदंडों के साथ एक ही पृष्ठ पर कॉल कर रहा हूं । इस मामले में, ngOnInit()कॉल नहीं करता है। क्या यह डिफ़ॉल्ट रूप से है या मुझे कुछ और जोड़ने की आवश्यकता है?
जवाबों:
आप इंजेक्शन लगा सकते हैं ActivatedRouteऔर सदस्यता ले सकते हैंparams
constructor(route:ActivatedRoute) {
route.params.subscribe(val => {
// put the code from `ngOnInit` here
});
}
राउटर केवल घटक को नष्ट और पुन: बनाता है जब यह एक अलग मार्ग पर नेविगेट करता है। जब केवल रूट परमेस या क्वेरी परम अपडेट किए जाते हैं लेकिन मार्ग समान होता है, तो घटक को नष्ट नहीं किया जाएगा और फिर से बनाया जाएगा।
घटक को फिर से बनाने के लिए मजबूर करने का एक वैकल्पिक तरीका एक कस्टम पुन: उपयोग की रणनीति का उपयोग करना है। यह भी देखें कि Angular2 राउटर 2.0.0 घटकों को पुनः लोड नहीं कर रहा है जब एक ही url विभिन्न मापदंडों के साथ लोड किया गया है? (इसको लागू करने के बारे में अभी तक बहुत सी जानकारी उपलब्ध नहीं है)
आप राउटर पर reuseStrategy को समायोजित कर सकते हैं।
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 ( मेरे मामले में app-routing.module.ts फ़ाइल में) को बदल दिया है :
@NgModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})] })
अपने नेविगेशन विधि पर,
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]));
}
यह समस्या संभवतः इस तथ्य से आ रही है कि आप ngOnDestroy का उपयोग करके अपनी सदस्यता समाप्त नहीं कर रहे हैं। यह है कि कैसे किया जाए।
निम्नलिखित rxjs सदस्यता आयात में लाओ।
import { Subscription } from 'rxjs/Subscription';
अपने कोणीय कोर आयात पर OnDestory जोड़ें।
import { Component, OnDestroy, OnInit } from '@angular/core';
अपने निर्यात वर्ग में OnDestory जोड़ें।
export class DisplayComponent implements OnInit, OnDestroy {
घटक पर प्रत्येक सदस्यता के लिए अपने निर्यात वर्ग के तहत rxjs से सदस्यता के मूल्य के साथ एक वस्तु संपत्ति बनाएँ।
myVariable: Subscription;
अपनी सदस्यता के मूल्य को MyVariable: सदस्यता के लिए सेट करें।
this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});
फिर ngOninit के ठीक नीचे ngOnDestory () जीवन चक्र हुक रखें और अपनी सदस्यता के लिए अपने सदस्यता समाप्त कथन में डालें। यदि आपके पास कई हैं, तो अधिक जोड़ें
ngOnDestroy() {
this.myVariable.unsubscribe();
}
ngOnDestoryबजाय टाइपिंग ngOnDestroyभी करता रहता हूं ;-)
अधिक जानकारी के साथ इस पृष्ठ पर सबसे अच्छे विचारों का संग्रह है
समाधान 1 - उपयोग परम सदस्यता:
ट्यूटोरियल: https://angular-2-training-book.rangle.io/rout/routeparams#reading-route-parameters
डॉक्स: 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();
}
}
इस कोड के साथ कुछ सामान्य समस्या यह है कि सदस्यता अतुल्यकालिक हैं और इससे निपटने के लिए मुश्किल हो सकती है। इसके अलावा आप ngOnDestroy पर अनसब्सक्राइब करना नहीं भूल सकते हैं वरना बुरी चीजें हो सकती हैं।
अच्छी बात यह है कि इस समस्या को संभालने का यह सबसे प्रलेखित और सामान्य तरीका है। जब आप किसी पृष्ठ पर जाते हैं तो हर बार उसे नष्ट करने और पुन: बनाने के बजाय टेम्पलेट को पुन: उपयोग करने से प्रदर्शन में सुधार होता है।
समाधान 2 - shouldReuseRoute / onSameUrlNavigation:
डॉक्स: https://angular.io/api/router/ExtraOptions#onSameUrlNavigation
डॉक्स: https://angular.io/api/router/RouteReuseStrategy#shouldReuse
डॉक्स: https://angular.io/api/router/ActivatedRouteSnapshot#params
RouterModule.forRootअपने प्रोजेक्ट में कहां स्थित है (सामान्य रूप से एप्लिकेशन- routing.module.ts या app.module.ts में पाया जाता है):
const routes: Routes = [
// ...
];
// ...
@NgModule({
imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
})],
exports: [RouterModule]
})
फिर AppComponent में निम्नलिखित जोड़ें:
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;
// ...
}
// ...
}
इस समाधान के साथ सामान्य समस्या यह है कि यह आम नहीं है। इसके अलावा, आप कोणीय ढांचे के डिफ़ॉल्ट व्यवहार को बदल रहे हैं, इसलिए आप उन मुद्दों पर चल सकते हैं जो लोग सामान्य रूप से नहीं करेंगे।
अच्छी बात यह है कि आपका सभी कोड समकालिक और समझने में आसान है।
उस कोड को स्थानांतरित करने पर विचार करें जो आपने ngOnInit में ngAfterViewInit में लिया था। बाद वाले को राउटर नेविगेशन कहा जाता है और आपको इस मामले में मदद करनी चाहिए।