라우터 탐색은 동일한 페이지에서 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;
    };
}

각도 9

나는 다음을 사용했고 그것은 효과가 있었다.

onButtonClick() {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
    }
    this.router.onSameUrlNavigation = 'reload';
    this.router.navigate('/myroute', { queryParams: { index: 1 } });
}

페이지를 다시로드해야합니까? 이것은 내 솔루션입니다 : 내가 변경 한 @NgModule을 (에 앱 routing.module.ts의 내 경우에는 파일) :

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

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

탐색 방법에서

this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/document'], {queryParams: {"search": currentSearch}});

나는 같은 문제가 있었고 추가로 경고를 받았습니다.

did you forget to call `ngZone.run()`

이 사이트는 최상의 솔루션을 제공했습니다.

import { Router } from '@angular/router';
import { NgZone } from '@angular/core';

...

  constructor(
    private ngZone:NgZone,
    private _router: Router
  ){ }

  redirect(to) {
    // call with ngZone, so that ngOnOnit of component is called
    this.ngZone.run(()=>this._router.navigate([to]));
  }

이 문제는 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. 구성 요소의 각 구독에 대한 내보내기 클래스 아래에서 rxjs의 Subscription 값을 사용하여 개체 속성을 만듭니다. myVariable: Subscription;

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

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

route 배열의 동일한 구성 요소에 대해 다른 경로를 만듭니다.

const route : Routes = [{경로 : "app", 구성 요소 : MyComponent}, {경로 : "app-reload", 구성 요소 : MyComponent}];

현재 URL이 "app"이면 "app-reload"를 사용하여 탐색하고 그 반대의 경우도 마찬가지입니다.

여기에 더 많은 정보와 함께이 페이지의 최고의 아이디어 모음이 있습니다.

해결 방법 1-params 구독 사용 :

튜토리얼 : https://angular-2-training-book.rangle.io/routing/routeparams#reading-route-parameters

문서 : https://angular.io/api/router/ActivatedRoute#params

param 변수를 사용하는 각 라우팅 구성 요소에는 다음이 포함됩니다.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

// ...

@Component({
    // ...
})
export class MyComponent implements OnInit, OnDestroy {
    paramsSub: Subscription;

    // ...

    constructor(activeRoute: ActivatedRoute) {

    }

    public ngOnInit(): void {
        // ...
        this.paramsSub = this.activeRoute.params.subscribe(val => {
            // Handle param values here
        });

        // ...
    }

    // ...

    public ngOnDestroy(): void {
        // Prevent memory leaks
        this.paramsSub.unsubscribe();
    }
}

이 코드의 몇 가지 일반적인 문제는 구독이 비동기적이고 처리하기 까다로울 수 있다는 것입니다. 또한 ngOnDestroy에서 구독을 취소하는 것을 잊지 마십시오. 그렇지 않으면 나쁜 일이 발생할 수 있습니다.

좋은 점은 이것이이 문제를 처리하는 가장 문서화되고 일반적인 방법이라는 것입니다. 또한 페이지를 방문 할 때마다 템플릿을 파괴하고 다시 만드는 대신 템플릿을 재사용하기 때문에 이러한 방식으로 성능이 향상됩니다.

솔루션 2-shouldReuseRoute / onSameUrlNavigation :

문서 : https://angular.io/api/router/ExtraOptions#onSameUrlNavigation

문서 : https://angular.io/api/router/RouteReuseStrategy#shouldReuseRoute

문서 : https://angular.io/api/router/ActivatedRouteSnapshot#params

RouterModule.forRoot프로젝트에서 위치를 찾습니다 (일반적으로 app-routing.module.ts 또는 app.module.ts에 있음).

const routes: Routes = [
   // ...
];

// ...

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

그런 다음 AppComponent에서 다음을 추가하십시오.

import { Component, OnInit} from '@angular/core';
import { Router } from '@angular/router';

// ...
@Component({
    // ...
})
export class AppComponent implements OnInit {
    constructor(private router: Router) {
    }

    ngOnInit() {
        // Allows for ngOnInit to be called on routing to the same routing Component since we will never reuse a route
        this.router.routeReuseStrategy.shouldReuseRoute = function() {
            return false;
        };

        // ...
    }

    // ...
}

마지막으로 라우팅 구성 요소에서 다음과 같은 매개 변수 변수를 처리 할 수 ​​있습니다.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

// ...

@Component({
    // ...
})
export class MyComponent implements OnInit {
    // ...

    constructor(activeRoute: ActivatedRoute) {

    }

    public ngOnInit(): void {
        // Handle params
        const params = +this.activeRoute.snapshot.params;

        // ...
    }

    // ...
}

이 솔루션의 일반적인 문제는 일반적이지 않다는 것입니다. 또한 Angular 프레임 워크의 기본 동작을 변경하므로 사람들이 일반적으로 겪지 않는 문제에 부딪 힐 수 있습니다.

좋은 점은 모든 코드가 동기적이고 이해하기 쉽다는 것입니다.

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

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

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