Program Club

라우터 탐색은 동일한 페이지에서 ngOnInit를 호출하지 않습니다.

proclub 2021. 1. 5. 08:21
반응형

라우터 탐색은 동일한 페이지에서 ngOnInit를 호출하지 않습니다.


router.navigate일부 쿼리 문자열 매개 변수를 사용하여 동일한 페이지에서 호출 하고 있습니다. 이 경우 ngOnInit()전화하지 않습니다. 기본적으로 설정되어 있습니까? 아니면 다른 항목을 추가해야합니까?


당신은 주입 ActivatedRoute하고 구독 할 수 있습니다params

constructor(route:ActivatedRoute) {
  route.params.subscribe(val => {
    // put the code from `ngOnInit` here
  });
}

라우터는 다른 경로로 이동할 때만 구성 요소를 파괴하고 재생성합니다. 경로 매개 변수 또는 쿼리 매개 변수 만 업데이트되지만 경로가 동일하면 구성 요소가 파괴되고 다시 생성되지 않습니다.

구성 요소를 강제로 다시 만드는 또 다른 방법은 사용자 지정 재사용 전략을 사용하는 것입니다. Angular2 라우터 2.0.0이 다른 매개 변수로 동일한 URL을로드 할 때 구성 요소를 다시로드하지 않음을 참조하십시오 . (아직 사용 가능한 정보가 많지 않은 것 같습니다. 구현 방법)


라우터에서 재사용 전략을 조정할 수 있습니다.

constructor(private router: Router) {
    // override the route reuse strategy
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
}

페이지를 다시로드해야합니까? 이것은 내 해결책입니다. 내 @NgModule (제 경우에는 app-routing.module.ts 파일에서)을 변경했습니다.

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

NgOnInit인스턴스가 생성 될 때 한 번 호출됩니다. 동일한 인스턴스에 대해 NgOnInit다시 호출되지 않습니다. 이를 호출하려면 생성 된 인스턴스를 파괴해야합니다.


이 문제는 ngOnDestroy를 사용하여 구독을 종료하지 않는다는 사실에서 발생할 수 있습니다. 완료하는 방법은 다음과 같습니다.

  1. 다음 rxjs 구독 가져 오기를 가져 오십시오. import { Subscription } from 'rxjs/Subscription';

  2. Angular Core Import에 OnDestory를 추가하십시오. import { Component, OnDestroy, OnInit } from '@angular/core';

  3. 내보내기 클래스에 OnDestory를 추가하십시오. export class DisplayComponent implements OnInit, OnDestroy {

  4. 구성 요소의 각 구독에 대한 내보내기 클래스 아래에서 Subscription from rxjs 값을 사용하여 개체 속성을 만듭니다. myVariable: Subscription;

  5. 구독 값을 MyVariable : Subscriptions로 설정합니다. this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});

  6. 그런 다음 ngOninit 바로 아래에 ngOnDestory () 라이프 사이클 후크를 배치하고 구독에 대한 구독 취소 문을 입력합니다. 여러 개가있는 경우 더 추가하십시오.ngOnDestroy() { this.myVariable.unsubscribe(); }


ngOnInit에있는 코드를 ngAfterViewInit로 이동하는 것을 고려하십시오. 후자는 라우터 탐색에서 호출되는 것으로 보이며이 경우 도움이 될 것입니다.


라우터가 같은 페이지에서 탐색하고 ngOnInit ()를 호출하고 싶을 때 예를 들어 다음과 같이합니다.

this.router.navigate ([ 'category / list', category]) .then (() => window.location.reload ());

참조 URL : https://stackoverflow.com/questions/41678356/router-navigate-does-not-call-ngoninit-when-same-page

반응형