typescript - Jak znovu načíst aktuální trasu pomocí Angular 2 routeru

Používám Angular 2 se strategií hashlocation.

Komponenta je načtena touto cestou:

"departments/:id/employees"

Zatím všechno v pořádku.

Poté, co úspěšně uložíme více upravených řádků tabulky najednou, chci znovu načíst aktuální URL trasy pomocí:

this.router.navigate([`departments/${this.id}/employees`]);

Ale nic se neděje, proč?

Odpověď č. 1

Vytvořte funkci v kontroleru, která přesměruje na očekávanou trasu takto:

redirectTo(uri: string) {
  this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
    this.router.navigate([uri])});
}

Pak to používáte takto

this.redirectTo('//place your uri here');

Tato funkce přesměruje na fiktivní trasu a rychle se vrátí na cílovou trasu, aniž by si toho uživatel všiml.

Odpověď č. 2

To nyní lze provést v Angular 5.1 pomocí vlastnosti onSameUrlNavigation konfigurace Routeru.

Přidal jsem blog, který vysvětluje jak zde, ale podstata je následující

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Ve vaší konfiguraci routeru povolte možnost onSameUrlNavigation a nastavte ji na 'reload'. To způsobí, že router spustí cyklus událostí, když se pokusíte navigovat na trasu, která je již aktivní.

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

Ve vašich definicích tras nastavte runGuardsAndResolvers na always. Tímto řeknete routeru, aby vždy spouštěl cykly ochranných stražníků a resolverů a vyvolával související události.

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

Nakonec, v každé komponentě, ve které byste chtěli povolit znovunačítání, je potřeba zpracovat události. To lze provést importem routeru, navázáním na události a zavoláním inicializační metody, která resetuje stav vaší komponenty a případně znovu načte data, pokud je to potřeba.

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = 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.
 }

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

S těmito kroky byste měli mít povoleno opětovné načítání tras.

Odpověď č. 3

Používám tento pro projekt Angular 11:

reloadCurrentRoute() {
  const currentUrl = this.router.url;
  this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
    this.router.navigate([currentUrl]);
  });
}

PS: Testováno a funguje na všech verzích nad 7.

Odpověď č. 4

UPRAVIT

Pro novější verze Angularu (5.1+) použijte odpověď navrženou @Simonem McClivem

Stará odpověď

Našel jsem toto řešení na žádosti o funkci pro Angular na GitHubu:

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

this._router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._router.navigated = false;
        window.scrollTo(0, 0);
    }
});

Zkusil jsem přidat toto do mé funkce ngOnInit v app.component.ts a opravdu to fungovalo. Všechny další kliknutí na tentýž odkaz nyní znovu načítají component a data.

Odkaz na původní požadavek na funkci na GitHubu

Zásluhu má mihaicux2 na GitHubu.

Testoval jsem to na verzi 4.0.0-rc.3 s import { Router, NavigationEnd } from '@angular/router';

Odpověď č. 5

To je to, co jsem udělal s Angular 12. Nejsem si jistý, zda to funguje ve verzích nižších než 9.

Budete to muset zavolat, když budete potřebovat znovu načíst.

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

Router forRoot musí mít nastaveno SameUrlNavigation na 'reload'

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

A každá vaše trasa musí mít nastaveno runGuardsAndResolvers na 'always'

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

Odpověď č. 6

Pokud vaše navigate() nezmění URL, která je již zobrazena na panelu adresy vašeho prohlížeče, router nemá co dělat. Není úkolem routeru obnovovat data. Pokud chcete data aktualizovat, vytvořte službu injektovanou do komponenty a zavolejte funkci load na službě. Pokud budou načtena nová data, aktualizují zobrazení prostřednictvím vazeb.

Odpověď č. 7

To na mě funguje jako kouzlo

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

Odpověď č. 8

Trochu složité: použijte stejnou cestu s nějakými fiktivními parametry. Například-

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

Odpověď č. 9

Hack pro obnovení směrování v Angular 2-4

Pro mě funguje použití této metody uvnitř kořenové komponenty (komponenty, která je přítomna na jakékoliv cestě):

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

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

Odpověď č. 10

Při změně parametru se stránka nepřenačte. To je opravdu dobrá vlastnost. Není potřeba stránku znovu načítat, ale měli bychom změnit hodnotu komponenty. Metoda paramChange se zavolá při změně URL. Takže můžeme aktualizovat data komponenty.

/product/: id / details

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(params => {
        this.paramsChange(params.id);
    });
}

// Call this method on page change

ngOnInit() {

}

// Call this method on change of the param
paramsChange(id) {

}