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

不言
풀어 주다: 2018-11-21 11:32:53
앞으로
4740명이 탐색했습니다.

이 기사는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!