কিভাবে কৌণিক মধ্যে একটি উপাদান রিফ্রেশ

Question

আমি একটি কৌণিক প্রকল্পে কাজ করছি। আমি একটি উপাদান রিফ্রেশ ক্রিয়া সঙ্গে সংগ্রাম করছি।

আমি রাউটারের উপাদানগুলি বোতাম ক্লিকে রিফ্রেশ করতে চাই। আমার যখন রিফ্রেশ বোতামটি ক্লিক করা হয় তখন উপাদান / রাউটারটি রিফ্রেশ হওয়া দরকার।

আমি চেষ্টা করেছি window.location.reload()এবং location.reload()এই দুটি আমার প্রয়োজনের জন্য উপযুক্ত নয়। এটি সম্পর্কে যদি কেউ সচেতন হন তবে দয়া করে সহায়তা করুন।

Comments

আপনি কি এই প্রশ্নে আপনার কোডটি ভাগ করতে পারেন? আপনি কি চেষ্টা করা হয়।

— চন্দ্রু

এটি একটি জটিল কোড, এতে কোডের লাইন সংখ্যা রয়েছে, ভাগ করা কঠিন

— শ্রীহরি বল্লামপল্লি

@ সৌরভ, সাধারণত এটি কোনও উপাদান পুনরায় লোড করে না। আপনার একটি ফাংশন থাকতে পারে (যেমন "পুনরায় চালু করুন" কল করুন) এবং আপনার বোতামটিতে ফাংশনটি রিফ্রেশ করুন। আপনার যদি পথ বা অন্য কোনও পরিষেবা পরিবর্তনের জন্য সাবস্ক্রাইব প্রয়োজন হয় তবে ngOnInit -আপনার উপাদানটি কনট্রাক্টর নয়, অন্নইট- প্রসারিত করতে হবে

— এলিসিও

এই আমি সঙ্গে কৌণিক 9 করেছিল stackoverflow.com/a/60909777/1072395

— Wlada

Answer 1

কিছুটা গবেষণা এবং নীচে হিসাবে আমার কোডটি সংশোধন করার পরে, স্ক্রিপ্টটি আমার পক্ষে কাজ করেছিল। আমি কেবল শর্তটি যুক্ত করেছি:

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

Comments

আমি এটি একটি ইনজেকশনযোগ্য পরিষেবাতে ব্যবহার করছি। আমি "your actualComponent"একটি পরিবর্তনশীল সঙ্গে প্রতিস্থাপন । ভেরিয়েবলটি this.location.path()কল করার আগে সেট করা আছে navigateByUrl। এইভাবে, কলিং উপাদান বা ডুপ্লিকেট / রুটের চারপাশে পাসের কোনও পরামিতিগুলি পাস করার দরকার নেই।

— টিউবার

আপনি কি দয়া করে ব্যাখ্যা করতে পারবেন 'রেফার্স কম্পোনেন্ট' এবং 'আপনার আসল কম্পোনেন্ট' কী?

— reverie_ss

বেশিরভাগ লোকই '/'যেখানে রয়েছে /RefrshComponentতা ব্যবহার করে [Your actualComponent"]ভাল থাকবেন এবং আপনার জন্য ইউআরএল (এবং / অথবা প্যারাম) পাস করতে হবে যা আপনি যেমন পুনরায় লোড করতে চান this.router.navigate(["/items"])। এই হ্যাকটি মূলত শীর্ষস্থানীয় ইউআরএলে পুনঃনির্দেশ করে এবং তারপরে খুব তাড়াতাড়ি বেশিরভাগ ব্যবহারকারীর কাছে নজরে না আসা লক্ষ্যযুক্ত ইউআরএল ফিরে আসে এবং এটি সহজভাবে অর্জন করার জন্য এটি সবচেয়ে মার্জিত হ্যাক হিসাবে উপস্থিত হয়।

— ধীরে ধীরে

আমি সম্মতি দিয়েছি এটি অবশ্যই কাজ করবে ... তবে এটি আমার অ্যাপে ব্যর্থ হয় (কৌণিক 6)। আমি যদি '/'আমার ডামি রুট হিসাবে এটি ব্যবহার করি তবে এটি (দিয়ে redirectTo) যায় যেখানে আমার অ্যাপ-রাউটিং.মডিউল.টিস ''(খালি স্ট্রিং) এর পথে ফিরে যায় এবং থামায়, navigate()কলটিতে সমাপ্তির পথে অগ্রসর হয় না । যদি আমি /fooআমার ডামি রুট হিসাবে অস্তিত্বহীন স্ট্রিং (উদাহরণস্বরূপ ) ব্যবহার করি তবে এটি redirectToআমার অ্যাপ-রুটিং.মডিউল.টাস **(অন্য কিছু) এর জন্য পুনঃনির্দেশ করে এবং আবার থামবে, যেখানে আসল পথে যাবেনা ( কৌতূহলজনকভাবে, URL বারটি আসল রুটে পরিবর্তিত হয় change এখানে আলাদা কি কোন চিন্তা?

— মাইকেল Sorens

এটি সতর্কতার সাথে ব্যবহার না করা হলে অসীম পুনঃনির্দেশের লুপ তৈরি করতে পারে

— টমাস কাটজ

Answer 2

This.ngOnInit () ব্যবহার করুন ; একই পৃষ্ঠাটি পুনরায় লোড করার পরিবর্তে পুরো পৃষ্ঠাটি পুনরায় লোড করুন !!

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

        this.ngOnInit();

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

Comments

যদিও এটি লেখকদের প্রশ্নের উত্তর দিতে পারে, এতে কিছু ব্যাখ্যাকারী শব্দ এবং / অথবা ডকুমেন্টেশনের লিঙ্কের অভাব রয়েছে। আশেপাশে কিছু বাক্যাংশ ছাড়া কাঁচা কোড স্নিপেটগুলি খুব বেশি কার্যকর নয়। আপনি কীভাবে একটি ভাল উত্তর লিখতে পারেন তা খুব সহায়ক। আপনার উত্তর সম্পাদনা করুন।

— হেলো

এটি নির্বাচিত উত্তরের চেয়ে ভাল ইনপুট তবে এটির ব্যাখ্যা নেই। আমার নির্দিষ্ট ক্ষেত্রে আমাকে একটি শিশু উপাদানকে রিফ্রেশ করতে হয়েছিল। সেক্ষেত্রে বেশ কয়েকটি উপায় রয়েছে তবে প্রস্তাবিতরা কোনও পরিষেবা ব্যবহার করে বা সন্তানের কাছে পিতামাতার কাছ থেকে একটি ইভেন্ট সম্প্রচার করে।

— ক্লাদিও

সম্মত, এটি কেবল তখনই কাজ করে যদি আপনি উপাদানটির মধ্যে থেকে উপাদানটি রিফ্রেশ করতে চান - আপনি যদি শিশু / বাহ্যিক উপাদানগুলির সাথে কাজ করে থাকেন তবে এটি.অনআইনিট () কাজ করবে না

— অ্যাস্ট্রো 8891 '

যদিও এটি উপাদানটির জন্য কাজ করে, এটি ফর্ম বৈধকারকদের পুনরায় সেট করে না।

— ভিকি গনসাল্ভেস

নিখুঁত কাজ করে, আপনাকে ধন্যবাদ। এবং ব্যাখ্যা এএএএআইসি সম্পর্কিত, কোডটি সব বলে।

— মার্টন টাটাই

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

ভাগ্যক্রমে, আপনি যদি কৌনিক 5.1+ ব্যবহার করেন তবে দেশীয় সমর্থন যুক্ত হওয়ায় আপনাকে আর একটি হ্যাক প্রয়োগ করতে হবে না। আপনাকে কেবল রাউটারমুডুল বিকল্পগুলিতে 'পুনরায় লোড' করতে সেমউরল নেভিগেশনটি চালু করতে হবে :

@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 দেখুন । এই সমাধানটি গার্ডস / রেজলভারগুলি ব্যবহার করে আরও বৃহত্তর জটিল অ্যাপ্লিকেশনগুলির জন্য কাজ করবে তবে সাধারণ উদাহরণগুলির জন্য ব্যর্থ হবে।

— ধীরে ধীরে

হ্যাঁ, স্যামআরল নেভিগেশন আবারও নেভিগেশন ইভেন্টগুলিকে জ্বালিয়ে দেবে, তবে এটি উপাদানটি পুনরায় লোড করে না

— পল স্টোরি

Answer 5

এটি বাক্সের বাইরে কিছুটা দূরে এবং আমি জানি না যে এটি আপনাকে সহায়তা করে কিনা তবে আপনি চেষ্টা করেছেন কিনা

this.ngOnInit();

এটি একটি ফাংশন তাই এতে আপনার যে কোনও কোড রয়েছে তা কেবল একটি রিফ্রেশের মতো পুনরুদ্ধার হবে।

Answer 6

সুস্পষ্ট রুট ছাড়াই আরও একটি উপায়:

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

Answer 7

এটি হ্যাকের মাধ্যমে অর্জন করা যায়, কিছু নমুনা উপাদানটিতে নেভিগেট করুন এবং তারপরে আপনি যে উপাদানটি পুনরায় লোড করতে চান সেটিতে নেভিগেট করুন।

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

Comments

স্যাম্পল কম্পোনেন্ট মানে কি এটি আমার প্রকল্পের একটি খালি উপাদান বা অন্য উপাদান হওয়া উচিত?

— শ্রীহরি বল্লামপল্লি

এটি একটি

— ছদ্মবেশী

ঠিক আছে আমি এটি চেষ্টা করব

— শ্রীহরি বল্লামপল্লি

আমি যদি সত্য দিই তবে আমি একটি ত্রুটি বার্তা পাচ্ছি: [টিএসএস] টাইপ 'ট্রু' এর 'নেভিগেশনএক্সট্রাস' টাইপের কোনও মিল নেই

— শ্রীহরি বল্লামপল্লি

@ শ্রীহরি বল্লামপল্লি আপডেট হওয়া উত্তরটি যাচাই করুন, আপনাকে একটি বিষয় পাস করতে হবে {এড়িয়ে চলুন লোকেশন পরিবর্তন: সত্য}

— সজীবথরন

Answer 8

আমার আবেদনে আমার উপাদান রয়েছে এবং সমস্ত ডেটা এপিআই থেকে আসছে যা আমি কম্পোনেন্টের কনস্ট্রাক্টরে কল করছি। বোতামটি রয়েছে যার মাধ্যমে আমি আমার পৃষ্ঠার ডেটা আপডেট করছি। বোতামে ক্লিক করে আমি পিছনে এবং ডেটা রিফ্রেশে ডেটা সংরক্ষণ করি। সুতরাং উপাদানটি পুনরায় লোড / রিফ্রেশ করা - আমার প্রয়োজনীয়তা অনুযায়ী - কেবলমাত্র ডেটা রিফ্রেশ করার জন্য। যদি এটিও আপনার প্রয়োজন হয় তবে উপাদানগুলির কনস্ট্রাক্টরে লিখিত একই কোডটি ব্যবহার করুন।

Answer 9

কেবল এটি করুন: (কৌনিক 9 এর জন্য)

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

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

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

Comments

দয়া করে ওপিএসের মন্তব্যটি পড়ুন, পুরো পৃষ্ঠাটি রিফ্রেশ করা তাঁর পক্ষে বিকল্প নয়, এটি প্রথম স্থানে কৌনিক থাকার উদ্দেশ্যটি পরাস্ত করে

— ইহোরবন্ড

প্রশ্নটি পুরো পৃষ্ঠাটিই নয় পুনরায় লোড উপাদানটির জন্য জিজ্ঞাসা করে।

— সন্তোষ

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

এইচটিএমএল ফাইল

<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

কৌণিক রাউটার থেকে কেবল রুটরইউজ স্ট্রেটজি পরিবর্তন করুন:

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

রাউটারপ্রপার্টিটিকে "নেভিগেট করা" মিথ্যাতে সেট করুন:

this._router.navigated = false;

তারপরে আপনার উপাদানটিতে নেভিগেট করুন:

this._router.navigate(['routeToYourComponent'])

এর পরে পুরানো / ডিফল্ট রুট রিসেটস্ট্রেজি পুনরুদ্ধার করুন:

this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
          return future.routeConfig === curr.routeConfig;

আপনি এটি থেকে একটি পরিষেবা করতে পারেন:

@Injectable({
  providedIn: 'root'
})
export class RouterService {

  constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

  reuseRoutes(reuse: boolean) {
    if (!reuse) {
      this._router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
      };
    }
    if (reuse) {
      this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
      };
    }
  }

  async refreshPage(url?: string) {
    this._router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };

    this._router.navigated = false;

    url ? await this._router.navigate([url]) : await this._router.navigate([], { relativeTo: this._activatedRoute });

    this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
      return future.routeConfig === curr.routeConfig;
    };
  }
}

Answer 14

আমার ক্ষেত্রে আমি refresh the whole pageকেবল উপাদানগুলির পরিবর্তে চেয়েছিলাম তাই আমি এটি এটি কীভাবে করেছি

window.location.reload();

Answer 15

router.navigate['/path']এটি কেবলমাত্র আপনাকে নির্দিষ্ট পথে
ব্যবহার router.navigateByUrl('/path')
করে পুরো পৃষ্ঠাটি পুনরায় লোড করে দেয়

Answer 16

রিফ্রেশ করার অন্যান্য উপায় (শক্ত উপায়) এর মতো কৌনিক 2 তে একটি পৃষ্ঠা এফ 5 এর মতো দেখাচ্ছে

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

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}

Comments

তিনি বলেছিলেন যে পুরো পৃষ্ঠাটি পুনরায় লোড করা উপযুক্ত নয়, এটি কেবলমাত্র একক / একাধিক উপাদান নয়, পুরো পৃষ্ঠাটি পুনরায় লোড করে।

— মিলান Velebit

আমি এটি ব্যবহার করে শেষ করেছি, কৌণিক অবস্থান পরিষেবাদিটির পুনরায় লোড না থাকলে আমি উইন্ডোটি ব্যবহার করেছি।

— পল স্টোরি