라우터 탐색에서 동일한 페이지에서 ngOnInit를 호출하지 않음

라우터 탐색에서 동일한 페이지에서 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(내 경우 app-routing.module.ts 파일)을 변경했습니다.

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

당신의 탐색 방법에서,

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

다음은 이 페이지의 최고의 아이디어 모음이며 자세한 정보는 다음과 같습니다.

솔루션 1 - 매개 변수 사용 구독:

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

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

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

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

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

좋은 점은 이것이 이 문제를 처리하는 가장 문서화되고 일반적인 방법이라는 것입니다.또한 페이지를 방문할 때마다 삭제하고 다시 작성하는 대신 템플릿을 다시 사용하므로 성능이 향상됩니다.

솔루션 2 - 경로 / on SameUrlNavigation을 재사용해야 합니다.

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

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

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

RouterModule.forRoot프로젝트에 위치합니다(자세한 내용은 app-sys.ts 또는 app.ts.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 인스턴스가 생성될 때 한 번 호출됩니다.동일한 인스턴스는 다시 호출되지 않습니다.호출하려면 생성된 인스턴스를 삭제해야 합니다.

저도 같은 문제가 있었고, 추가로 경고를 받았습니다.

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에서 구독 값을 가진 개체 속성을 만듭니다. myVariable: Subscription;

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

6. 그런 다음 ngOninit 바로 아래에 ngOnDestory() 수명 주기 후크를 배치하고 구독에 대한 구독 취소 문을 입력합니다.개일 에는 더 합니다.ngOnDestroy() { this.myVariable.unsubscribe(); }

경로 배열에서 동일한 구성 요소에 대해 다른 경로를 생성합니다.

const routes : 경로 = [{path : "app", 구성 요소: MyComponent}, {path: "app-proutes", 구성 요소: MyComponent}];

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

라우터 이벤트를 구독하는 것이 솔루션일 수 있습니다.

수품Router그리고.NavigationEnd

import { Router, NavigationEnd } from '@angular/router';

생성자에서 라우터를 시작합니다.

constructor(router: Router) {

생성자에서 라우터 이벤트를 구독합니다.

        this.router.events.subscribe((ev) => {
          if (ev instanceof NavigationEnd) {
            //do something
          }
        });

router.에 대해 가 있다는 것을 . navig, 은 만약 그것이 router에 이 될 수 .app.component.ts또는 모든 공유 구성 요소에서.

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

이것은 라우터 탐색이 호출하지 않는 가장 좋은 해결책입니다.ngOnInit같은 페이지일 때 기능합니다.

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

// this code is for redirecting to the dashboard page with calling ngOnInIt
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.router.onSameUrlNavigation = 'reload';
    this.router.navigate(['./dashboard']);

이것은 효과가 있어야 하며 특별한 경우에만 사용되어야 합니다.리디렉션 후에 탐색을 많이 하지 않아도 될 때는 이 기능을 사용할 수 있습니다. 그렇지 않으면 이 기능은 때때로 엉망이 될 수 있습니다.필요할 때 언제든지 'routeRuseStrategy'를 true로 만들 수 있습니다.

당신이 같은 페이지에서 라우터를 탐색하고 ngOnInit()를 호출하고 싶을 때, 당신은 그렇게 합니다.

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

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