路由器导航在同一页面时不调用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'})] })

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. 将OnDestory添加到Angular Core导入中。 import { Component, OnDestroy, OnInit } from '@angular/core';

3. 将OnDestory添加到您的导出类。 export class DisplayComponent implements OnInit, OnDestroy {

4. 在组件的每个订阅的导出类下，创建一个对象属性，其值为rxjs中的Subscription。 myVariable: Subscription;

5. 将您的订阅的值设置为MyVariable：订阅。 this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});

6. 然后，在ngOninit的正下方放置ngOnDestory（）生命周期挂钩，并在您的取消订阅语句中进行订阅。如果有多个，请添加更多 ngOnDestroy() { this.myVariable.unsubscribe(); }

为路由数组中的同一组件创建一个不同的路径。

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

在每个使用参数变量的路由组件中，包括以下内容：

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（））;