> 웹 프론트엔드 > JS 튜토리얼 > Angular에서 현재 페이지를 새로 고치는 방법 소개(예제 포함)

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

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

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

onSameUrlNavigation

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

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

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

를 사용하여 onSameUrlNavigation

1

2

3

4

5

6

7

@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

1

2

3

4

5

6

7

8

9

10

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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

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