Karma konum stratejisi ile açısal 2 kullanıyorum.

Bileşen bu rota ile yüklenir:

"departments/:id/employees"

Şimdiye kadar iyi.

Birden çok düzenlenmiş tablo satırından başarılı bir toplu kaydetme yaptıktan sonra geçerli yol URL'sini şu yolla yeniden yüklemek istiyorum:

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

Ama hiçbir şey olmuyor, neden?

Navigate () yönteminiz tarayıcınızın adres çubuğunda gösterilen URL'yi değiştirmezse, yönlendiricinin yapacak bir işi yoktur. Verileri yenilemek yönlendiricinin işi değildir. Verileri yenilemek istiyorsanız, bileşene enjekte edilen bir hizmet oluşturun ve hizmetteki yükleme işlevini çağırın. Yeni veriler alınacaksa, görünümü ciltler aracılığıyla güncelleyecektir.

Bu, şimdi onSameUrlNavigationYönlendirici yapılandırmasının özelliği kullanılarak Açısal 5.1'de yapılabilir .

Burada nasıl olduğunu açıklayan bir blog ekledim ama bunun özü şöyle:

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

Yönlendiricinizin yapılandırma etkinleştirme onSameUrlNavigationseçeneğinde, olarak ayarlayın 'reload'. Bu, zaten etkin olan bir rotaya gitmeye çalıştığınızda Yönlendiricinin bir olay döngüsünü başlatmasına neden olur.

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

Rotanızı tanımlarda, set runGuardsAndResolversiçin always. Bu, yönlendiriciye her zaman korumaları ve çözümleyici döngülerini başlatarak ilgili olayları tetiklemesini söyleyecektir.

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

Son olarak, yeniden yüklemeyi etkinleştirmek istediğiniz her bileşende olayları işlemeniz gerekir. Bu, yönlendiriciyi içe aktararak, olaylara bağlanarak ve bileşeninizin durumunu sıfırlayan ve gerekirse verileri yeniden getiren bir başlatma yöntemini çağırarak yapılabilir.

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();
   }
 }
}

Tüm bu adımlar uygulandığında, rota yeniden yüklemeyi etkinleştirmiş olmanız gerekir.

Denetleyicide beklenen rotaya böyle yönlendiren bir işlev oluşturun

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

o zaman böyle kullan

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

bu işlev sahte bir rotaya yönlendirecek ve kullanıcı fark etmeden hızlı bir şekilde hedef rotaya dönecektir.

DÜZENLE

Daha yeni Angular (5.1+) sürümleri için @Simon McClive tarafından önerilen yanıtı kullanın

Eski cevap

Bu geçici çözümü Angular için GitHub özellik isteğinde buldum:

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

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

Bunu app.component.ts işlevime eklemeyi denedim ngOnInitve işe yaradı. Aynı bağlantıya yapılan tüm diğer tıklamalar artık componentve verilerini yeniden yükler .

Orijinal GitHub özellik isteğine bağlantı

Kredi GitHub'da mihaicux2'ye gidiyor .

Ben sürümüne bu test 4.0.0-rc.3ileimport { Router, NavigationEnd } from '@angular/router';

Biraz zor: bazı kukla parametrelerle aynı yolu kullanın. Örneğin-

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

Bunu Açısal 9 projesi için kullanıyorum:

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

PS: Test edildi ve "Açısal 7, 8" üzerinde de çalışıyor

Açısal 2-4 yol yeniden yükleme kesmek

Benim için, bu yöntemi bir kök bileşen (herhangi bir rotada bulunan bileşen) içinde kullanmak çalışır:

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]);
    });
  }

Bu benim için bir cazibe gibi çalışıyor

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

Param değişikliğinde yeniden yükleme sayfası gerçekleşmez. Bu gerçekten iyi bir özellik. Sayfayı yeniden yüklemenize gerek yoktur, ancak bileşenin değerini değiştirmeliyiz. paramChange yöntemi url değişikliğini çağırır. Böylece bileşen verilerini güncelleyebiliriz

/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) {

}

Açısal 9 ile yaptığım şey bu . Bunun eski sürümlerde çalıştığından emin değilim.

Yeniden yüklemeniz gerektiğinde bunu aramanız gerekir.

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

Yönlendirici forRoot'un SameUrlNavigation öğesinin 'yeniden yüklenecek' şekilde ayarlanmış olması gerekir

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

Ve her rotanızın runGuardsAndResolvers öğesinin 'always' olarak ayarlanmış olması gerekir

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

Benim için sıkı kodlama ile çalışır

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

Bildiğim kadarıyla bu açısal 2 yönlendirici ile yapılamaz. Ama sadece yapabilirsin:

window.location.href = window.location.href

Görünümü yeniden yüklemek için.

Açısal iç işleyişlerle uğraşmak zorunda kalmayan hızlı ve düz bir çözüm buldu:

Temel olarak: Sadece aynı hedef modülle alternatif bir rota oluşturun ve bunlar arasında geçiş yapın:

const routes: Routes = [
  {
    path: 'gesuch',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  },
  {
    path: 'gesuch-neu',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  }
];

Ve burada geçiş menüsü:

<ul class="navigation">
    <li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
    <li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>

Umarım yardımcı olur :)

Biraz sert ama

this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {

    this.router.onSameUrlNavigation = 'ignore';

});

Benim durumumda:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

doğru çalış

OnInit uygulayın ve route.navigate () yönteminde ngOnInit () yöntemini çağırın

Bir örneğe bakın:

export class Component implements OnInit {

  constructor() {   }

  refresh() {
    this.router.navigate(['same-route-here']);
    this.ngOnInit();   }

  ngOnInit () {

  }

Bir kukla bileşen ve rota kullanarak benzer bir senaryo çözüldü reload, bu aslında bir redirect. Bu kesinlikle tüm kullanıcı senaryolarını kapsamaz, ancak sadece senaryom için çalıştı.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';

@Component({
  selector: 'reload',
  template: `
    <h1>Reloading...</h1>
  `,
})
export class ReloadComponent implements OnInit{
  constructor(private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    const url = this.route.snapshot.pathFromRoot.pop().url.map(u => u.path).join('/');
    this.router.navigateByUrl(url);
  }
}

Yönlendirme, bir joker karakter kullanarak tüm URL'leri yakalamak için kablolanmıştır:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { ReloadComponent } from './views/reload/reload.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, ReloadComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { 
        path: 'reload',
        children: [{
          path: '**',
          component: ReloadComponent 
        }]
      },
      { path: '**', redirectTo: 'login'}
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

Bunu kullanmak için, gitmek istediğimiz URL'ye yeniden yükleme eklememiz yeterlidir:

  this.router.navigateByUrl('reload/some/route/again/fresh', {skipLocationChange: true})

Geçerli rotayı yenilemek için farklı yaklaşımlar vardır

Yönlendirici davranışını değiştirme (Açısal 5.1'den beri) onSameUrlNavigation üzerindeki yönlendiricileri 'yeniden yüklemek' olarak ayarlayın. Bu, yönlendirici olaylarını aynı URL Gezinmesinde yayınlayacaktır.

• Daha sonra bunları bir rotaya abone olarak kullanabilirsiniz
• Çözümleyicileri yeniden çalıştırmak için runGuardsAndResolvers kombinasyonu ile kullanabilirsiniz

Yönlendiriciye dokunmayın

• URL'de geçerli zaman damgasına sahip bir refresh queryParam iletin ve yönlendirilen bileşeninizdeki queryParams'a abone olun.
• Yönlendirilen bileşeni tutmak için yönlendirici-çıkışının etkinleştirme Olayını kullanın.

Https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e altında daha ayrıntılı bir açıklama yazdım

Bu yardımcı olur umarım.

Yenilemek istediğiniz bileşenin yolunun olduğunu varsayalım view, ardından şunu kullanın:

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
}; 

debuggeryönteme geçtikten sonra tam yolun ne olacağını bilmek için yöntemin içine ekleyebilirsiniz "departments/:id/employees".

Bir çözüm, sahte bir parametreyi (yani saniye cinsinden süre) geçirmektir, bu şekilde bağlantı her zaman yeniden yüklenir:

this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])

Bu sorunu çözmek için kullanıyorum setTimeoutve navigationByUrlbenim için iyi çalışıyor.

Başka bir URL'ye yönlendirilir ve bunun yerine geçerli URL'ye tekrar gelir ...

 setTimeout(() => {
     this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
           this.router.navigate([route]));
     }, 500)

Bunun Angular 6+ ile (yerel olarak) çözüldüğüne inanıyorum; Kontrol

• burada https://github.com/angular/angular/issues/13831 &&

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

Ancak bu, tüm bir rota için geçerlidir (tüm çocuk rotalarını da içerir)

Tek bir bileşeni hedeflemek istiyorsanız, şu şekilde yapabilirsiniz: Değişen bir sorgu parametresi kullanın, böylece istediğiniz kadar gezinebilirsiniz.

Navigasyon noktasında (sınıf)

   this.router.navigate(['/route'], {
        queryParams: { 'refresh': Date.now() }
    });

"Yenilemek / yeniden yüklemek" istediğiniz Bileşen'de

// . . . Component Class Body

  $_route$: Subscription;
  constructor (private _route: ActivatedRoute) {}

  ngOnInit() {
    this.$_route$ = this._route.queryParams.subscribe(params => {
      if (params['refresh']) {
         // Do Something
         // Could be calling this.ngOnInit() PS: I Strongly advise against this
      }

    });
  }

  ngOnDestroy() {
    // Always unsubscribe to prevent memory leak and unexpected behavior
    this.$_route$.unsubscribe();
  }

// . . . End of Component Class Body

Angular hala bunun için iyi bir çözüm içermiyor gibi görünüyor. Burada bir github sorunu gündeme getirdim: https://github.com/angular/angular/issues/31843

Bu arada, bu benim geçici çözümüm. Yukarıda önerilen diğer çözümlerden bazılarına dayanıyor, ancak bence biraz daha sağlam. Yönlendirici hizmetini ReloadRouter, yeniden yükleme işleviyle ilgilenen RELOAD_PLACEHOLDERve çekirdek yönlendirici yapılandırmasına a ekleyen bir " " içine sarmayı içerir . Bu, ara navigasyon için kullanılır ve diğer rotaların (veya korumaların) tetiklenmesini önler.

Not: Yalnızca , yeniden yükleme işlevini istediğinizReloadRouter durumlarda kullanın . Aksi takdirde normal kullanın .Router

import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ReloadRouter {
  constructor(public readonly router: Router) {
    router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
  }

  public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
    return this.router
      .navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
      .then(() => this.router.navigate(commands, extras));
  }
}

İthalat Routerve ActivatedRoutegelen@angular/router

import { ActivatedRoute, Router } from '@angular/router';

Enjekte edin Routerve ActivatedRoute(URL'den bir şeye ihtiyacınız olması durumunda)

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

Gerekirse URL'den herhangi bir parametre alın.

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

Bir kukla veya ana url'ye ve ardından gerçek url'ye giderek bir hile kullanmak bileşeni yenileyecektir.

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

Senin durumunda

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

Kukla bir rota kullanırsanız, herhangi bir URL ile eşleşmediği takdirde, bulunamadı bir URL uyguladıysanız bir başlık yanıp sönüyor 'Bulunamadı' ifadesini göreceksiniz.

rota parametresi değişikliklerine abone ol

    // parent param listener ie: "/:id"
    this.route.params.subscribe(params => {
        // do something on parent param change
        let parent_id = params['id']; // set slug
    });

    // child param listener ie: "/:id/:id"
    this.route.firstChild.params.subscribe(params => {
        // do something on child param change
        let child_id = params['id'];
    });

Router Link üzerinden rotayı değiştiriyorsanız Şunu izleyin:

  constructor(public routerNavigate: Router){

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

          this.router.events.subscribe((evt) => {

            if (evt instanceof NavigationEnd) {

                this.router.navigated = false;
             }
          })
      }

RouterModule'de "onSameUrlNavigation" özelliğini kullanmalı ve ardından Route olaylarına abone olmalısınız https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Rotanın ne zaman saklanacağına karar verir.

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

ve yönlendiricinin navigasyon değerini false olarak ayarlayın, bu da bu rotanın asla yönlendirilmediğini gösterir

this.mySubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.router.navigated = false;
    }
});

Birkaç düzeltme denedim ve hiçbiri çalışmıyor. Sürümüm basit: sorgu parametrelerine yeni bir kullanılmayan parametre ekle

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

window.location.replace

// rotayı kapatmak için backtick kullanın

window.location.replace ( departments/${this.id}/employees)