angular - सक्रिय मार्ग को पुनः लोड/रीफ्रेश नहीं कर सकता




angular2-routing angular2-router3 (5)

कोणीय 2 आरसी 7 के लिए - राउटर 3.0

Index.html में <script>document.write('<base href="/" />');</script> में बेस यूआरएल बदलें <script>document.write('<base href="/" />');</script>

मैंने हाल ही में नए आरसी 3 और राउटर 3alpha में अपडेट किया है और ऐसा लगता है कि कुछ चीजें बदल गई हैं।

मैंने देखा कि एक सक्रिय मार्ग के लिंक पर एक क्लिक अब घटक को पुनः लोड करने के परिणामस्वरूप नहीं आता है। मैं इस व्यवहार को नए राउटर 3 के साथ कैसे प्राप्त करूं?

मेरा लिंक दिखता है

<a [routerLink]="['/link1']">Link1</a>

और परीक्षण करने के लिए मैंने बस ngOnInit में एक यादृच्छिक संख्या का उपयोग किया:

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

मार्गों के बीच स्विटिचिंग करते समय यह ठीक काम करता है, लेकिन वर्तमान में सक्रिय मार्ग पर एक क्लिक के परिणामस्वरूप घटक का पुनः लोड नहीं होता है।


कोणीय 5.1 के रूप में यह अब अंतर्निहित कोणीय राउटर के हिस्से के रूप में onSameUrlNavigation कॉन्फ़िगरेशन विकल्प का उपयोग करके किया जा सकता है। यह सेट-अप करने और जाने के लिए काफी सरल है हालांकि दस्तावेज से स्पष्ट नहीं है।

सबसे पहले आपको जो करना होगा, वह आपके app.routing.ts में विकल्प सेट करें यदि आपके पास एक या फ़ाइल है जहां आपका ऐप रूटिंग कॉन्फ़िगर किया गया है।

SameUrlNavigation 'reload' या false दो संभावित मान हैं। डिफ़ॉल्ट मान false जो राउटर को सक्रिय मार्ग पर नेविगेट करने के लिए कहा जाता है जब कुछ भी नहीं होने का कारण बनता है। हम इस मान को reload करने के लिए सेट करना चाहते हैं। reload को ध्यान में reload उचित है, वास्तव में मार्ग को पुनः लोड करने का काम नहीं करता है, यह केवल राउटर पर घटनाओं को फिर से ट्रिगर करता है जिसे हमें फिर से जोड़ने की आवश्यकता होती है।

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
})

यह निर्धारित करने के लिए कि उन घटनाओं को वास्तव में निकाल दिया गया है, आपको अपने मार्ग पर runGuardsAndResolvers कॉन्फ़िगरेशन विकल्प निर्दिष्ट करने की आवश्यकता है। यह तीन मान ले सकता है ...

paramsChange - रूट paramsChange समय केवल आग लगती है जैसे कि आईडी /user/:id आईडी में /user/:id बदलती है

paramsOrQueryParamsChange - जब एक मार्ग परम परिवर्तन होता है या क्वेरी paramsOrQueryParamsChange बदल जाता है तो आग paramsOrQueryParamsChange । उदाहरण के लिए id या limit संपत्ति /user/:id/invites?limit=10 में बदलती है /user/:id/invites?limit=10

always - जब मार्ग नेविगेट किया जाता है तो हमेशा आग लगती है

हम हमेशा इस मामले में निर्दिष्ट करना चाहते हैं। एक उदाहरण मार्ग नीचे दिखाया गया है।

export const routes: Routes = [
  {
    path: 'invites',
    component: InviteComponent,
    children: [
      {
        path: '',
        loadChildren: './pages/invites/invites.module#InvitesModule',
      },
    ],
    canActivate: [AuthenticationGuard],
    runGuardsAndResolvers: 'always',
  }
]

वह आपका राउटर कॉन्फ़िगर किया गया है। अगला कदम वास्तव में आपके घटकों में से किसी एक के भीतर घटनाओं को संभालना है। आपको अपने घटक में राउटर आयात करने और फिर घटनाओं में हुक करने की आवश्यकता होगी। इस उदाहरण में, मैंने NavigationEnd ईवेंट में शामिल किया है जिसे राउटर ने एक मार्ग से अगले मार्ग तक अपनी नेविगेशन पूरी कर ली है। जिस तरह से हमने ऐप को कॉन्फ़िगर किया है, वैसे ही यह तब भी आग लगेगा जब आप वर्तमान मार्ग पर नेविगेट करने का प्रयास करते हैं।

export class InviteComponent implements OnInit {
  constructor(
    // ... your declarations here
    private router: Router,
  ) {
    // subscribe to the router events
    this.router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        this.initialiseInvites();
      }
    });
  }

  initialiseInvites() {
    // Set default values and re-fetch any data you need.
  }
}

भारी भारोत्तोलन initialiseInvites() विधि में जाता है, यह वह जगह है जहां आप गुणों को अपने डिफ़ॉल्ट मानों पर रीसेट करते हैं और घटक को डेटा प्रारंभिक स्थिति में वापस लाने के लिए सेवाओं से डेटा प्राप्त करते हैं।

आपको प्रत्येक घटक में इस पैटर्न को दोहराने की जरूरत है जिसे आप रीफ्रेश बटन के किसी भी रूप से क्लिक या रीफ्रेश करते समय पुनः लोड करने में सक्षम होना चाहते हैं, रूटिंग फ़ाइल में प्रत्येक मार्ग पर runGuardsAndResolvers विकल्प को जोड़ना सुनिश्चित करें।


यह वर्तमान में समर्थित नहीं है। यदि केवल पैरामीटर मान बदलते हैं लेकिन मार्ग वही रहता है तो घटक फिर से नहीं बनाया जाता है।

https://github.com/angular/angular/issues/9811 भी https://github.com/angular/angular/issues/9811

जब पैराम घटक घटक को फिर से शुरू करने के लिए बदलते हैं तो अधिसूचित होने के लिए आप पैराम की सदस्यता ले सकते हैं।

https://.com/a/38560010/217408 भी https://.com/a/38560010/217408


यह सबसे अच्छा हैक है कि मैं इस कष्टप्रद समस्या को पाने के लिए आने में सक्षम हूं:

    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));

यह काम करता है, लेकिन यह अभी भी एक हैक है और मुझे नफरत है कि Angular टीम ने एक reload() विधि प्रदान नहीं की है


if (currentUrl.indexOf('/settings') > -1) {
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings'));
} else {
    this.router.navigate(['/settings']);
}




angular2-router3