ฉันใช้ angular 2 กับกลยุทธ์ hashlocation

ส่วนประกอบถูกโหลดด้วยเส้นทางนั้น:

"departments/:id/employees"

ดีมาก

หลังจากที่ฉันทำการบันทึกเป็นกลุ่มสำเร็จของแถวตารางที่แก้ไขหลายแถวฉันต้องการโหลด url เส้นทางปัจจุบันซ้ำผ่าน:

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

แต่ไม่มีอะไรเกิดขึ้นทำไม?

หาก nav ของคุณ () ไม่เปลี่ยน URL ที่แสดงอยู่แล้วบนแถบที่อยู่ของเบราว์เซอร์ของคุณเราเตอร์ก็ไม่ต้องทำอะไร ไม่ใช่หน้าที่ของเราเตอร์ในการรีเฟรชข้อมูล หากคุณต้องการรีเฟรชข้อมูลให้สร้างเซอร์วิสที่แทรกเข้าไปในคอมโพเนนต์และเรียกใช้ฟังก์ชันโหลดบนเซอร์วิส หากจะดึงข้อมูลใหม่ข้อมูลจะอัปเดตมุมมองผ่านการเชื่อมโยง

ตอนนี้สามารถทำได้ใน Angular 5.1 โดยใช้onSameUrlNavigationคุณสมบัติของการกำหนดค่าเราเตอร์

ฉันได้เพิ่มบล็อกที่อธิบายถึงวิธีการที่นี่ แต่ส่วนสำคัญของมันมีดังนี้

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

ในการตั้งค่าเราเตอร์ของคุณเปิดใช้งานตัวเลือกการตั้งค่าให้onSameUrlNavigation 'reload'สิ่งนี้ทำให้เราเตอร์เริ่มวงจรเหตุการณ์เมื่อคุณพยายามนำทางไปยังเส้นทางที่ใช้งานอยู่แล้ว

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

ในคำจำกัดความเส้นทางของคุณตั้งค่าการrunGuardsAndResolvers alwaysสิ่งนี้จะบอกให้เราเตอร์เริ่มการทำงานของยามและวงจรรีโซลเวอร์เสมอโดยจะเริ่มต้นเหตุการณ์ที่เกี่ยวข้อง

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

สุดท้ายในแต่ละองค์ประกอบที่คุณต้องการเปิดใช้งานการโหลดซ้ำคุณจะต้องจัดการกับเหตุการณ์นั้น ๆ ซึ่งสามารถทำได้โดยการนำเข้าเราเตอร์เชื่อมโยงกับเหตุการณ์และเรียกใช้วิธีการเริ่มต้นที่รีเซ็ตสถานะของส่วนประกอบของคุณและดึงข้อมูลใหม่หากจำเป็น

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

เมื่อทำตามขั้นตอนเหล่านี้แล้วคุณควรเปิดใช้งานการโหลดเส้นทางใหม่

สร้างฟังก์ชันในตัวควบคุมที่เปลี่ยนเส้นทางไปยังเส้นทางที่คาดไว้เช่นนั้น

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

แล้วใช้แบบนี้

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

ฟังก์ชันนี้จะเปลี่ยนเส้นทางไปยังเส้นทางจำลองและกลับไปยังเส้นทางปลายทางอย่างรวดเร็วโดยที่ผู้ใช้ไม่รู้ตัว

แก้ไข

สำหรับ Angular เวอร์ชันใหม่กว่า (5.1+) ให้ใช้คำตอบที่แนะนำโดย @Simon McClive

คำตอบเก่า

ฉันพบวิธีแก้ปัญหานี้ในคำขอคุณสมบัติ GitHub สำหรับ 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);
    }
});

ฉันลองเพิ่มสิ่งนี้ในฟังก์ชั่นapp.component.ts ของฉันngOnInitและมันใช้งานได้จริง การคลิกเพิ่มเติมทั้งหมดในลิงก์เดียวกันจะโหลดcomponentและข้อมูลซ้ำ

ลิงก์ไปยังคำขอคุณลักษณะ GitHub ดั้งเดิม

เครดิตไปที่mihaicux2บน GitHub

ผมทดสอบนี้กับรุ่น4.0.0-rc.3ที่มีimport { Router, NavigationEnd } from '@angular/router';

ยุ่งยากเล็กน้อย: ใช้เส้นทางเดียวกันกับพารามิเตอร์จำลอง ตัวอย่างเช่น-

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

ฉันใช้อันนี้สำหรับโครงการ Angular 10:

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

PS: ทดสอบแล้วและใช้งานได้กับ "Angular 7, 8, 9"

สิ่งนี้ใช้ได้กับฉันเหมือนมีเสน่ห์

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

แฮ็คโหลดซ้ำเส้นทาง 2-4 เส้นทาง

สำหรับฉันการใช้วิธีนี้ภายในองค์ประกอบรูท (ส่วนประกอบซึ่งมีอยู่ในทุกเส้นทาง) ใช้ได้ผล:

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

นี่คือสิ่งที่ผมกับเชิงมุม 9 ฉันไม่แน่ใจว่าจะใช้ได้กับเวอร์ชันเก่าหรือไม่

คุณจะต้องเรียกสิ่งนี้เมื่อคุณต้องการโหลดซ้ำ

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

เราเตอร์ forRoot จำเป็นต้องมี SameUrlNavigation ตั้งค่าเป็น 'โหลดซ้ำ'

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

และทุกเส้นทางของคุณจำเป็นต้องมี runGuardsAndResolvers ตั้งค่าเป็น 'always'

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

ในหน้าโหลดการเปลี่ยนแปลงพารามิเตอร์จะไม่เกิดขึ้น นี่เป็นคุณสมบัติที่ดีจริงๆ ไม่จำเป็นต้องโหลดหน้านี้ซ้ำ แต่เราควรเปลี่ยนค่าของส่วนประกอบ วิธี paramChange จะเรียกการเปลี่ยนแปลง url ดังนั้นเราจึงสามารถอัปเดตข้อมูลส่วนประกอบ

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

}

เท่าที่ฉันรู้ว่าไม่สามารถทำได้กับเราเตอร์ใน Angular 2 แต่คุณสามารถทำได้:

window.location.href = window.location.href

เพื่อโหลดมุมมองซ้ำ

สำหรับฉันทำงานฮาร์ดโค้ดด้วย

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

พบวิธีแก้ปัญหาที่รวดเร็วและตรงไปตรงมาซึ่งไม่ต้องใช้คนจรจัดกับการทำงานด้านในของเชิงมุม:

โดยทั่วไป: เพียงสร้างเส้นทางอื่นด้วยโมดูลปลายทางเดียวกันและเพียงแค่สลับระหว่างเส้นทาง:

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

และนี่คือเมนูสลับ:

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

หวังว่าจะช่วยได้ :)

ไม่ยอมใครง่ายๆ แต่

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

    this.router.onSameUrlNavigation = 'ignore';

});

ในกรณีของฉัน:

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

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

ทำงานถูกต้อง

ใช้ OnInit และเรียก ngOnInit () ในวิธีการสำหรับ route.navigate ()

ดูตัวอย่าง:

export class Component implements OnInit {

  constructor() {   }

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

  ngOnInit () {

  }

แก้ไขสถานการณ์ที่คล้ายกันโดยใช้ส่วนประกอบจำลองและเส้นทางสำหรับreloadซึ่งทำไฟล์redirect. สิ่งนี้ไม่ครอบคลุมสถานการณ์ของผู้ใช้ทั้งหมดอย่างแน่นอน แต่ใช้ได้กับสถานการณ์ของฉัน

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

การกำหนดเส้นทางมีสายเพื่อตรวจจับ URL ทั้งหมดโดยใช้สัญลักษณ์แทน:

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

ในการใช้สิ่งนี้เราต้องเพิ่มการโหลดซ้ำใน url ที่เราต้องการไป:

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

วิธีแก้ปัญหาคือการส่งพารามิเตอร์ดัมมี่ (เช่นเวลาเป็นวินาที) ด้วยวิธีนี้ลิงก์จะโหลดซ้ำเสมอ:

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

มีวิธีต่างๆในการรีเฟรชเส้นทางปัจจุบัน

เปลี่ยนพฤติกรรมของเราเตอร์ (ตั้งแต่ Angular 5.1) ตั้งค่าเราเตอร์บนSameUrlNavigationเป็น 'โหลดซ้ำ' สิ่งนี้จะแสดงเหตุการณ์ของเราเตอร์ในการนำทาง URL เดียวกัน

• จากนั้นคุณสามารถจัดการได้โดยสมัครรับเส้นทาง
• คุณสามารถใช้มันร่วมกับ runGuardsAndResolvers เพื่อเรียกใช้ตัวแก้ไขซ้ำ

ปล่อยให้เราเตอร์ไม่ถูกแตะต้อง

• ส่งรีเฟรช queryParam ด้วยการประทับเวลาปัจจุบันใน URL และสมัครสมาชิก queryParams ในองค์ประกอบเส้นทางของคุณ
• ใช้เหตุการณ์เปิดใช้งานของเราเตอร์เต้าเสียบเพื่อรับส่วนประกอบที่กำหนดเส้นทางไว้

ฉันได้เขียนคำอธิบายโดยละเอียดเพิ่มเติมในhttps://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e

หวังว่านี่จะช่วยได้

ฉันกำลังใช้setTimeoutและnavigationByUrlเพื่อแก้ปัญหานี้ ... และมันก็ใช้ได้ดีสำหรับฉัน

มันถูกเปลี่ยนเส้นทางไปยัง URL อื่นและกลับมาอีกครั้งใน URL ปัจจุบัน ...

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

สมมติว่าเส้นทางของคอมโพเนนต์ที่คุณต้องการรีเฟรชคือviewจากนั้นใช้สิ่งนี้:

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

คุณสามารถเพิ่มภายในวิธีการที่จะรู้ว่าสิ่งที่เป็นเส้นทางที่แน่นอนจะมาหลังจากไปที่debugger"departments/:id/employees"

ทำลายมากว่าเชิงมุมยังดูเหมือนจะไม่รวมถึงการเป็นทางออกที่ดีสำหรับเรื่องนี้ ฉันได้ยกปัญหา github ที่นี่: https://github.com/angular/angular/issues/31843

ในระหว่างนี้นี่เป็นวิธีแก้ปัญหาของฉัน มันสร้างจากโซลูชันอื่น ๆ ที่แนะนำข้างต้น แต่ฉันคิดว่ามันแข็งแกร่งกว่าเล็กน้อย มันเกี่ยวข้องกับการรวมบริการเราเตอร์ไว้ใน " ReloadRouter" ซึ่งจะดูแลฟังก์ชันการโหลดซ้ำและยังเพิ่ม a RELOAD_PLACEHOLDERในการกำหนดค่าเราเตอร์หลัก ใช้สำหรับการนำทางชั่วคราวและหลีกเลี่ยงการทริกเกอร์เส้นทางอื่น ๆ (หรือยาม)

หมายเหตุ:ใช้เฉพาะReloadRouterในกรณีเหล่านั้นเมื่อคุณต้องการฟังก์ชันการโหลดซ้ำ ใช้ปกติ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));
  }
}

นำเข้าRouterและActivatedRouteจาก@angular/router

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

ฉีดRouterและActivatedRoute(ในกรณีที่คุณต้องการอะไรจาก URL)

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

รับพารามิเตอร์ใด ๆ หากจำเป็นจาก URL

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

การใช้เคล็ดลับโดยไปที่ดัมมี่หรือ URL หลักจากนั้นไปยัง URL จริงจะรีเฟรชคอมโพเนนต์

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

ในกรณีของคุณ

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

หากคุณใช้เส้นทางจำลองคุณจะเห็นชื่อเรื่องกะพริบ "ไม่พบ" หากคุณใช้ url ที่ไม่พบในกรณีที่ไม่ตรงกับ url ใด ๆ

สมัครรับข้อมูลการเปลี่ยนแปลงพารามิเตอร์เส้นทาง

    // 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 ให้ทำตามนี้:

  constructor(public routerNavigate: Router){

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

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

            if (evt instanceof NavigationEnd) {

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

ฉันเชื่อว่าสิ่งนี้ได้รับการแก้ไขแล้ว (โดยกำเนิด) ใน Angular 6+; ตรวจสอบ

• ที่นี่https://github.com/angular/angular/issues/13831 &&

• และที่นี่https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

แต่ใช้ได้กับทั้งเส้นทาง (รวมถึงเส้นทางเด็กทั้งหมดด้วย)

หากคุณต้องการกำหนดเป้าหมายองค์ประกอบเดียวให้ทำดังนี้: ใช้พารามิเตอร์การค้นหาที่เปลี่ยนแปลงเพื่อให้คุณนำทางได้หลายครั้งเท่าที่คุณต้องการ

ที่จุดนำทาง (ชั้นเรียน)

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

ในคอมโพเนนต์ที่คุณต้องการ "รีเฟรช / โหลดซ้ำ"

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

ตัดสินใจว่าเมื่อใดควรจัดเก็บเส้นทางกลับเป็นเท็จ

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

และตั้งค่าการนำทางของเราเตอร์เป็นเท็จซึ่งแสดงว่าเส้นทางนี้ไม่เคยกำหนดเส้นทาง

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

ฉันได้ลองแก้ไขสองสามครั้งแล้ว แต่ก็ไม่ได้ผล เวอร์ชันของฉันเรียบง่าย: เพิ่มพารามิเตอร์ใหม่ที่ไม่ได้ใช้ลงในพารามิเตอร์การค้นหา

            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

// ใช้ backtick เพื่อปิดเส้นทาง

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

รหัสด้านล่างนี้จะใช้งานได้:

logoFn(url: any) {

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

}