Saya menggunakan sudut 2 dengan strategi hashlocation.

Komponen dimuat dengan rute itu:

"departments/:id/employees"

Sejauh ini baik-baik saja.

Setelah saya melakukan penyimpanan batch yang berhasil dari beberapa baris tabel yang diedit, saya ingin memuat ulang url rute saat ini melalui:

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

Tapi tidak ada yang terjadi, kenapa?

Jika navigasi Anda () tidak mengubah URL yang sudah ditampilkan di bilah alamat browser Anda, router tidak ada hubungannya. Bukan tugas router untuk menyegarkan data. Jika Anda ingin menyegarkan data, buat layanan yang dimasukkan ke dalam komponen dan aktifkan fungsi beban pada layanan tersebut. Jika data baru akan diambil, itu akan memperbarui tampilan melalui binding.

Ini sekarang dapat dilakukan di Angular 5.1 menggunakan onSameUrlNavigationproperti konfigurasi Router.

Saya telah menambahkan sebuah blog yang menjelaskan bagaimana di sini tetapi intinya adalah sebagai berikut

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

Di onSameUrlNavigationopsi mengaktifkan konfigurasi router Anda , atur ke 'reload'. Hal ini menyebabkan Router mengaktifkan siklus peristiwa saat Anda mencoba menavigasi ke rute yang sudah aktif.

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

Dalam definisi rute Anda, setel runGuardsAndResolverske always. Ini akan memberi tahu router untuk selalu memulai siklus penjaga dan resolver, menjalankan peristiwa terkait.

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

Terakhir, di setiap komponen yang ingin Anda aktifkan pemuatan ulang, Anda perlu menangani kejadian tersebut. Ini dapat dilakukan dengan mengimpor router, mengikat kejadian dan menjalankan metode inisialisasi yang menyetel ulang status komponen Anda dan mengambil ulang data jika diperlukan.

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

Dengan semua langkah ini di tempat, Anda harus mengaktifkan pemuatan ulang rute.

Buat fungsi di pengontrol yang mengarahkan ulang ke rute yang diharapkan seperti itu

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

lalu gunakan seperti ini

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

fungsi ini akan mengarahkan ke dummy route dan dengan cepat kembali ke rute tujuan tanpa pengguna menyadarinya.

EDIT

Untuk versi Angular (5.1+) yang lebih baru, gunakan jawaban yang disarankan oleh @Simon McClive

Jawaban lama

Saya menemukan solusi ini pada permintaan fitur GitHub untuk Angular:

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

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

Saya mencoba menambahkan ini ke fungsi app.component.ts saya ngOnInit, dan itu pasti berhasil. Semua klik lebih lanjut pada tautan yang sama sekarang memuat ulang componentdata dan.

Tautkan ke permintaan fitur GitHub asli

Kredit diberikan ke mihaicux2 di GitHub.

Saya menguji ini pada versi 4.0.0-rc.3denganimport { Router, NavigationEnd } from '@angular/router';

Sedikit rumit: gunakan jalur yang sama dengan beberapa parameter dummy. Sebagai contoh-

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

Saya menggunakan yang ini untuk proyek Angular 10:

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

PS: Diuji dan bekerja juga pada "Angular 7, 8, 9"

Ini bekerja untuk saya seperti pesona

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

Retas reload rute 2-4 sudut

Bagi saya, menggunakan metode ini di dalam komponen root (komponen, yang ada di rute mana pun) berfungsi:

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

Inilah yang saya lakukan dengan Angular 9 . Saya tidak yakin apakah ini berfungsi di versi yang lebih lama.

Anda harus memanggil ini saat Anda perlu memuat ulang.

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

Router forRoot harus memiliki SameUrlNavigation yang disetel ke 'reload'

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

Dan setiap rute Anda harus memiliki runGuardsAndResolvers yang disetel ke 'selalu'

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

Pada halaman muat ulang perubahan param tidak akan terjadi. Ini adalah fitur yang sangat bagus. Tidak perlu memuat ulang halaman tetapi kita harus mengubah nilai komponennya. Metode paramChange akan memanggil perubahan url. Jadi kita bisa mengupdate data komponen

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

}

Sejauh yang saya tahu ini tidak dapat dilakukan dengan router di Angular 2. Tapi Anda bisa melakukan:

window.location.href = window.location.href

Untuk memuat ulang tampilan.

Bagi saya bekerja dengan hardcoding

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

Temukan solusi cepat dan langsung yang tidak perlu mengutak-atik cara kerja sudut dalam:

Pada dasarnya: Buat saja rute alternatif dengan modul tujuan yang sama dan cukup beralih di antara mereka:

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

Dan berikut menu toggelingnya:

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

Semoga membantu :)

Sedikit hardcore tapi

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

    this.router.onSameUrlNavigation = 'ignore';

});

Dalam kasus saya:

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

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

bekerja dengan benar

implementasikan OnInit dan panggil ngOnInit () dalam metode untuk route.navigate ()

Lihat contoh:

export class Component implements OnInit {

  constructor() {   }

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

  ngOnInit () {

  }

Memecahkan skenario serupa dengan menggunakan komponen dummy dan rute untuk reload, yang sebenarnya melakukan a redirect. Ini jelas tidak mencakup semua skenario pengguna tetapi hanya berfungsi untuk skenario saya.

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

Perutean dihubungkan dengan kabel untuk menangkap semua url menggunakan karakter pengganti:

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 {}

Untuk menggunakan ini, kita hanya perlu menambahkan reload ke url yang ingin kita tuju:

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

Solusinya adalah dengan melewatkan parameter dummy (yaitu waktu dalam detik), dengan cara ini tautan selalu dimuat ulang:

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

Ada pendekatan berbeda untuk menyegarkan rute saat ini

Ubah perilaku router (Sejak Angular 5.1) Atur router onSameUrlNavigation ke 'reload'. Ini akan memancarkan acara router pada Navigasi URL yang sama.

• Anda kemudian dapat menanganinya dengan berlangganan rute
• Anda dapat menggunakannya dengan kombinasi runGuardsAndResolvers untuk menjalankan ulang resolver

Biarkan router tidak tersentuh

• Teruskan refresh queryParam dengan stempel waktu saat ini di URL dan berlangganan queryParams di komponen yang dirutekan.
• Gunakan Event aktif dari router-outlet untuk mendapatkan komponen yang dirutekan.

Saya telah menulis penjelasan yang lebih rinci di bawah https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e

Semoga ini membantu.

Saya menggunakan setTimeoutdan navigationByUrluntuk memecahkan masalah ini ... Dan ini bekerja dengan baik untuk saya.

Itu dialihkan ke URL lain dan sebagai gantinya muncul lagi di URL saat ini ...

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

Misalkan rute komponen yang ingin Anda refresh adalah view, gunakan ini:

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

Anda dapat menambahkan debuggerdi dalam metode untuk mengetahui rute pasti yang akan datang setelah menavigasi ke "departments/:id/employees".

Sangat membuat frustrasi karena Angular sepertinya masih belum menyertakan solusi yang baik untuk ini. Saya telah mengangkat masalah github di sini: https://github.com/angular/angular/issues/31843

Sementara itu, ini adalah solusi saya. Ini dibangun di atas beberapa solusi lain yang disarankan di atas, tetapi saya pikir ini sedikit lebih kuat. Ini melibatkan pembungkus layanan Router dalam " ReloadRouter", yang menangani fungsionalitas muat ulang dan juga menambahkan a RELOAD_PLACEHOLDERke konfigurasi router inti. Ini digunakan untuk navigasi sementara dan menghindari memicu rute lain (atau penjaga).

Catatan: Gunakan hanya ReloadRouterjika Anda menginginkan fungsionalitas muat ulang. Gunakan normal Routerjika tidak.

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

Impor Routerdan ActivatedRoutedari@angular/router

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

Menyuntikkan Routerdan ActivatedRoute(jika Anda membutuhkan sesuatu dari URL)

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

Dapatkan parameter apa pun jika diperlukan dari URL.

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

Menggunakan trik dengan menavigasi ke dummy atau url utama kemudian ke url sebenarnya akan menyegarkan komponen.

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

Dalam kasus Anda

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

Jika Anda menggunakan rute dummy maka Anda akan melihat judul berkedip 'Tidak Ditemukan' jika Anda telah menerapkan url tidak ditemukan jika tidak cocok dengan url mana pun.

berlangganan perubahan parameter rute

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

Jika Anda mengubah rute melalui Tautan Router Ikuti ini:

  constructor(public routerNavigate: Router){

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

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

            if (evt instanceof NavigationEnd) {

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

Saya yakin ini telah diselesaikan (secara native) di Angular 6+; memeriksa

• di sini https://github.com/angular/angular/issues/13831 &&

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

Tapi ini berfungsi untuk seluruh rute (termasuk semua rute anak juga)

Jika Anda ingin menargetkan satu komponen, berikut caranya: Gunakan parameter kueri yang berubah, sehingga Anda dapat menavigasi sebanyak yang Anda inginkan.

Di titik navigasi (kelas)

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

Di Komponen yang ingin Anda "segarkan / muat ulang"

// . . . 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

Memutuskan kapan rute harus disimpan return false to

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

dan setel nilai navigasi router ke false, yang menunjukkan bahwa rute ini tidak pernah dirutekan

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

Saya telah mencoba beberapa perbaikan dan tidak ada yang berhasil. Versi saya sederhana: tambahkan parameter baru yang tidak digunakan ke dalam parameter kueri

            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

// gunakan backtick untuk menyertakan rute

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

Kode di bawah ini akan berfungsi:

logoFn(url: any) {

    this.router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
    };
    this.router.navigate(['']); or
    this.router.navigate([url]);

}