ホームページ > 記事 > ウェブフロントエンド > Angular で現在のページを更新する方法の紹介 (例付き)
この記事では、PHP キューの実装に関するコード例を紹介します。必要な方は参考にしていただければ幸いです。
onSameUrlNavigation
OnSameUrlNavigation は、ルートのリロードをサポートするために angular5.1 以降で提供されます。 ,
には、「reload」と「ignore」という 2 つの値があります。デフォルトは「ignore」です。
現在の URL に移動する要求を受信したときにルーターが行うべきことを定義します。デフォルトでは、ルーターはこのナビゲーションを無視します。ただし、これにより「更新」ボタンなどの機能が使用できなくなります。このオプションを使用して、現在の URL に移動するときの動作を構成します。
使用
を使用して onSameUrlNavigation
@NgModule({ imports: [RouterModule.forRoot( routes, { onSameUrlNavigation: 'reload' } )], exports: [RouterModule] })
を設定します。 reload は実際にルートをリロードするのではなく、ルーターにマウントされたイベントを再開始するだけです。
runGuardsAndResolvers には 3 つの値があります。
paramsChange: ルーティング パラメータが変更された場合にのみトリガーされます。たとえば、/reports/:id の ID が変更されます。
paramsOrQueryParamsChange: ルーティング パラメーターが変更されたとき、またはトレーニング パラメーターが変更されたときにトリガーされます。たとえば、/reports/:id/list?page=23 の id または page 属性が変更された場合、
always: 常に
const routes: Routes = [ { path: '', children: [ { path: 'report-list', component: ReportListComponent }, { path: 'detail/:id', component: ReportDetailComponent, runGuardsAndResolvers: 'always' }, { path: '', redirectTo: 'report-list', pathMatch: 'full' } ] } ];# がトリガーされます。 ## コンポーネント リスニング router.events
import {Component, OnDestroy, OnInit} from '@angular/core'; import {Observable} from 'rxjs'; import {Report} from '@models/report'; import {ReportService} from '@services/report.service'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; @Component({ selector: 'app-report-detail', templateUrl: './report-detail.component.html', styleUrls: ['./report-detail.component.scss'] }) export class ReportDetailComponent implements OnInit, OnDestroy { report$: Observable<Report>; navigationSubscription; constructor( private reportService: ReportService, private router: Router, private route: ActivatedRoute ) { this.navigationSubscription = this.router.events.subscribe((event: any) => { if (event instanceof NavigationEnd) { this.initLoad(event); } }); } ngOnInit() { const id = +this.route.snapshot.paramMap.get('id'); this.report$ = this.reportService.getReport(id); } ngOnDestroy(): void { // 销毁navigationSubscription,避免内存泄漏 if (this.navigationSubscription) { this.navigationSubscription.unsubscribe(); } } initLoad(e) { window.scrollTo(0, 0); console.log(e); } }
以上がAngular で現在のページを更新する方法の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。