Angular에서 현재 페이지를 새로 고치는 방법 소개(예제 포함)

이 기사는 PHP 대기열 구현에 대한 코드 예제를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

onSameUrlNavigation

  OnSameUrlNavigation은 각도 5.1부터 경로 재로드를 지원하기 위해 제공됩니다. ,

 에는 '다시 로드'와 '무시'라는 두 가지 값이 있습니다. 기본값은 '무시'

  현재 URL로 이동하라는 요청을 받으면 라우터가 수행해야 하는 작업을 정의합니다. 기본적으로 라우터는 이 탐색을 무시합니다. 그러나 이렇게 하면 "새로 고침" 버튼과 같은 기능이 작동되지 않습니다. 현재 URL로 이동할 때 동작을 구성하려면 이 옵션을 사용합니다.

를 사용하여 onSameUrlNavigation

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

 을 구성하면 reload는 실제로 경로를 다시 로드하지 않고 라우터에 탑재된 이벤트를 다시 내보냅니다.

Configure runGuardsAndResolvers

 runGuardsAndResolvers에는 세 가지 값이 있습니다.

• paramsChange: 라우팅 매개변수가 변경될 때만 트리거됩니다. 예를 들어 /reports/:id의 id는 변경됩니다

• paramsOrQueryParamsChange: 라우팅 매개변수가 변경되거나 훈련 매개변수가 변경되면 트리거됩니다. 예를 들어, /reports/:id/list?page=23

• always: Always: Always Triggers

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

의 id 또는 페이지 속성 변경

위 내용은 Angular에서 현재 페이지를 새로 고치는 방법 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!