कोणीय में एक घटक को ताज़ा कैसे करें

Question

मैं एक कोणीय परियोजना पर काम कर रहा हूं। मैं एक घटक में ताज़ा कार्रवाई से जूझ रहा हूं।

मैं बटन क्लिक पर राउटर के घटकों को ताज़ा करना चाहता हूं। मेरे पास ताज़ा बटन है जब मैं उस पर क्लिक करता हूं तो घटक / राउटर को ताज़ा करने की आवश्यकता होती है।

मैंने कोशिश की window.location.reload()और location.reload()ये दोनों मेरी जरूरत के लिए उपयुक्त नहीं हैं। अगर किसी को इसके बारे में पता हो तो कृपया मदद करें।

Comments

क्या आप इस प्रश्न में अपना कोड साझा कर सकते हैं? तुम क्या करने की कोशिश कर रहे हैं।

— चंद्रू

यह एक जटिल कोड है, इसमें N की कोड ऑफ़ लाइन है,

— जिसे

@ सौरभ, आम तौर पर यह एक घटक को पुनः लोड नहीं करता है। आपके पास एक फ़ंक्शन हो सकता है (उदाहरण के लिए "पुनः आरंभ करें") और फ़ंक्शन को अपने बटन में कॉल करें ताज़ा करें। यदि आपको पथ बदलने या किसी अन्य सेवा के लिए सदस्यता की आवश्यकता है, तो फ़ंक्शन ngOnInit का उपयोग करें -आपके घटक को OnInit-, निर्माता का विस्तार करना होगा

— Eliseo

यही मैंने Angular 9 stackoverflow.com/a/60909777/1072395 के

— व्लादा

Answer 1

कुछ शोध और नीचे दिए गए मेरे कोड को संशोधित करने के बाद, स्क्रिप्ट ने मेरे लिए काम किया। मैंने बस शर्त जोड़ी:

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 

Comments

मैं एक इंजेक्शन सेवा में इसका उपयोग कर रहा हूं। मैं "your actualComponent"एक चर के साथ बदल दिया । चर सेट करने के this.location.path()लिए कॉल करने से पहले सेट किया गया है navigateByUrl। इस तरह, किसी भी पैरामीटर को कॉल करने वाले घटक या मार्गों से डुप्लिकेट / पास करने की आवश्यकता नहीं है।

— तिव्र

क्या आप बता सकते हैं कि 'RefrshComponent' और 'Your realComponent' क्या है?

— reverie_ss

अधिकांश लोग '/'जहां हैं /RefrshComponent, वहां का उपयोग करके ठीक हो जाएंगे , और [Your actualComponent"]आपके लिए बस url (और / या परमेस) पास कर देंगे, जिसे आप फिर से लोड करना चाहेंगे this.router.navigate(["/items"])। यह हैक अनिवार्य रूप से शीर्ष URL पर रीडायरेक्ट करता है, और फिर बहुत जल्दी उस इच्छित URL पर वापस आ जाता है, जो अधिकांश उपयोगकर्ताओं के लिए अस्वीकार्य है और बस इसे प्राप्त करने के लिए सबसे सुरुचिपूर्ण हैक प्रतीत होता है।

— 23

मैं मानता हूं कि यह निश्चित रूप से काम करना चाहिए ... लेकिन यह मेरे ऐप (कोणीय 6) में विफल रहता है। यदि मैं '/'अपने डमी मार्ग के रूप में उपयोग करता हूं, तो यह ( redirectToजहां) मेरे app-routing.module.ts को ''(खाली स्ट्रिंग) के पथ पर रीडायरेक्ट करता है और रुक जाता है, navigate()कॉल में पूर्ण मार्ग पर आगे नहीं बढ़ रहा है । अगर मैं /fooअपने डमी मार्ग के रूप में एक गैर-मौजूद स्ट्रिंग (जैसे ) का उपयोग करता हूं, तो यह (माध्यम से redirectTo) जहां मेरा ऐप-रूटिंग .odule.ts **(सब कुछ) के लिए रीडायरेक्ट करता है और फिर से बंद हो जाता है, वास्तविक रूट पर नहीं जा रहा है। उत्सुकता से, URL बार वास्तविक मार्ग में बदल जाता है। यहाँ क्या अलग है पर कोई विचार?

— माइकल सोरेंस

यह एक अनंत पुनर्निर्देशन लूप का कारण बन सकता है अगर सावधानी से उपयोग नहीं किया जाता है

— टॉमस काटज़

Answer 2

इस का प्रयोग करें ।ngOnInit (); पूरे पृष्ठ को पुनः लोड करने के बजाय एक ही घटक को पुनः लोड करने के लिए !!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }

Comments

हालांकि यह लेखकों के सवाल का जवाब दे सकता है, लेकिन इसमें कुछ स्पष्ट शब्दों और / या प्रलेखन के लिंक का अभाव है। रॉ कोड स्निपेट्स उनके आसपास कुछ वाक्यांशों के बिना बहुत उपयोगी नहीं हैं। आप यह भी पा सकते हैं कि कैसे एक अच्छा उत्तर लिखने में बहुत मददगार है। कृपया अपना उत्तर संपादित करें।

— नरक नोव

यह चयनित उत्तर की तुलना में बेहतर इनपुट है, लेकिन इसमें स्पष्टीकरण का अभाव है। मेरे विशिष्ट मामले में मुझे एक बच्चे के घटक को ताज़ा करना था। उस मामले में कई तरीके हैं, लेकिन अनुशंसित एक सेवा का उपयोग कर रहे हैं या माता-पिता से बच्चे के लिए एक घटना का प्रसारण कर रहे हैं।

— क्लाउडियो

सहमत हैं, यह केवल तभी काम करता है जब आप घटक के भीतर से घटक को ताज़ा करना चाहते हैं - यदि आप बच्चे / बाहरी घटकों के साथ काम कर रहे हैं। यह नहीं चलेगा () काम नहीं करेगा

— astro8891

भले ही यह घटक के लिए काम करता है, लेकिन यह प्रपत्र सत्यापनकर्ताओं को रीसेट नहीं करता।

— विक्की गोंसाल्वेस

सही काम करता है, धन्यवाद। और स्पष्टीकरण AFAIC के बारे में, कोड यह सब कहता है।

— Marton Tatai

Answer 3

यह आवश्यक घटक के निर्माता के लिए कोड में जोड़ना मेरे लिए काम किया।

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

सुनिश्चित करें कि करने के लिए सुनिश्चित करें unsubscribeइस से mySubscription में ngOnDestroy()।

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

अधिक जानकारी के लिए इस सूत्र का संदर्भ लें - https://github.com/angular/angular/issues/13831

Answer 4

सौभाग्य से, यदि आप Angular 5.1+ का उपयोग कर रहे हैं, तो आपको किसी हैक को लागू करने की आवश्यकता नहीं है क्योंकि देशी समर्थन जोड़ा गया है। आपको बस RouterModule विकल्पों में 'पुनः लोड' करने के लिए onSameUrlNavigation निर्धारित करने की आवश्यकता है :

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

अधिक जानकारी यहां पाई जा सकती है: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Comments

आप router.onSameUrlNavigation = 'reload'इंजेक्ट किए गए राउटर की संपत्ति का भी उपयोग कर सकते हैं ।

— 0zkr PM

कोणीय 6 का उपयोग करते हुए, मुझे इससे कोई फर्क नहीं पड़ा, अर्थात घटक पुनः लोड नहीं हुआ। स्वीकृत जवाब हालांकि काम करता है।

— तिव्र

यद्यपि डॉक्स में पूरी तरह से स्पष्ट नहीं है, onSameUrlNavigationइसका उद्देश्य गार्ड्स / रिज़ॉल्वर को फिर से स्थापित करना है, और पहले से ही रूट किए गए घटकों को फिर से लोड नहीं करना है। इस पर अधिक जानकारी के लिए github.com/angular/angular/issues/21115 देखें । यह समाधान गार्ड / रिज़ॉल्वर का उपयोग करके अधिक जटिल अनुप्रयोगों के लिए काम करेगा, लेकिन सरल उदाहरणों के लिए विफल हो जाएगा।

— 23

हाँ, onSameUrlNavigation फिर से नेविगेशन की घटनाओं को आग देगा, लेकिन यह घटक को फिर से लोड नहीं करता है

— पॉल स्टोरी

Answer 5

यह बहुत छोटा है और मुझे नहीं पता कि इससे आपको मदद मिलती है या नहीं, लेकिन आपने कोशिश की है

this.ngOnInit();

इसका एक फंक्शन है, इसलिए इसमें जो भी कोड होगा, उसे रिफ्रेश की तरह ही रिकॉल किया जाएगा।

Answer 6

बस ऐसा करें: (कोणीय 9 के लिए)

import { Inject } from '@angular/core';    
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document){ }

someMethode(){ this.document.location.reload(); }

Comments

कृपया ओपी टिप्पणी पढ़ें, पूरे पृष्ठ को ताज़ा करना उसके लिए कोई विकल्प नहीं है, यह पहले स्थान पर कोणीय होने के उद्देश्य को पराजित करता है

— ihorbond

प्रश्न केवल पूरे पृष्ठ को पुनः लोड करने के लिए नहीं है।

— संतोष

Answer 7

यह एक हैक के माध्यम से प्राप्त किया जा सकता है, कुछ नमूना घटक पर नेविगेट करें और फिर उस घटक पर नेविगेट करें जिसे आप फिर से लोड करना चाहते हैं।

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);

Comments

SampleComponent का मतलब है कि यह मेरी परियोजना में एक खाली घटक या दूसरा घटक होना चाहिए?

— श्रीहरि बल्लामपल्ली

यह एक डमी होना चाहिए, खाली हो सकता है

— सजतेर्थन

ठीक है, मैं यह कोशिश करूंगा

— श्रीहरि बल्लमपल्ली

अगर मैं सच देता हूं तो मुझे एक त्रुटि संदेश मिल रहा है: [ts] टाइप 'ट्रू' में टाइप 'नेविगेशनएक्स्ट्रा' का कोई गुण नहीं है

— श्रीहरि बल्लमपल्ली

@ श्रीहरिबालमपल्ली अद्यतन उत्तर की जाँच करें, आपको एक ऑब्जेक्ट पास करना होगा {SkipLocationChange: true}

— सजेतीहरण

Answer 8

मेरे आवेदन में मेरे पास घटक है और सभी डेटा एपीआई से आ रहा है जिसे मैं घटक के निर्माता में बुला रहा हूं। बटन है जिसके द्वारा मैं अपना पृष्ठ डेटा अपडेट कर रहा हूं। बटन पर क्लिक करें मैं वापस अंत में डेटा को बचाने के लिए और ताज़ा डेटा है। तो घटक को फिर से लोड / ताज़ा करने के लिए - मेरी आवश्यकता के अनुसार - केवल डेटा को ताज़ा करने के लिए है। यदि यह आपकी आवश्यकता भी है, तो घटक के कंस्ट्रक्टर में लिखे समान कोड का उपयोग करें।

Answer 9

स्पष्ट मार्ग के बिना एक और तरीका:

async reload(url: string): Promise<boolean> {
  await this.router.navigateByUrl('.', { skipLocationChange: true });
  return this.router.navigateByUrl(url);
}

Answer 10

KDO

// reload page hack methode

push(uri: string) {
    this.location.replaceState(uri) // force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) // replace
  }

Answer 11

constructor(private router:Router, private route:ActivatedRoute ) { 
}

onReload(){
 this.router.navigate(['/servers'],{relativeTo:this.route})
}

Answer 12

html फ़ाइल

<a (click)= "getcoursedetails(obj.Id)" routerLinkActive="active" class="btn btn-danger">Read more...</a>

ts फ़ाइल

  getcoursedetails(id)
  { 
  this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this._route.navigate(["course",id]);
  }); 

Answer 13

ताज़ा करने का दूसरा तरीका (कठिन तरीका) एक पृष्ठ कोणीय 2 में इस तरह से यह f5 जैसा दिखता है

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}

Comments

उन्होंने कहा कि पूरे पृष्ठ को फिर से लोड करना उपयुक्त नहीं है, यह पूरे पृष्ठ को पुनः लोड करता है, न कि केवल एक / कई घटकों को।

— मिलन वेलेबिट

मैंने इसका उपयोग करना समाप्त कर दिया है, सिवाय कोणीय स्थान सेवा के पुनः लोड नहीं होता है, इसलिए मैंने विंडो का उपयोग किया।

— पॉल स्टोरी