让页面导航到自身，向导航堆栈添加新实例

Question

在 Ionic 4.1/Angular 7.2.2 中，在页面之间导航时，这工作正常：

<a [routerLink]="'/myPage'" [routerDirection]="'forward'">Navigate!</a>

但是，我现在处于我希望从Route A导航到Route A的位置。 即在我的主页上有一个链接，它会在导航堆栈顶部打开一个新的主页实例。

两个页面在app-routing.module.ts中共享相同的路由，即：

{ 
  path: 'mypath/:id', 
  component: HomePage
}

由于:id的值不同，因此页面的呈现方式也会有所不同。我需要导航堆栈中主页的两个(或更多(不同实例，因为向后导航也应该是可能的。

使用Ionic和Angular路由器解决此问题的推荐方法是什么？

Answer 1

问题是缺少RouteReuseStrategy

这个问题特别与Ionic有关，它<ion-back-button>。

Angular 的默认行为是在只有参数更改时重用组件。这不会将组件添加到导航堆栈。

要解决此问题，您必须将@ionic/angular提供的RouteReuseStrategy添加到app.module.ts的提供程序数组中

import { IonicRouteStrategy } from "@ionic/angular";

{
  provide: RouteReuseStrategy,
  useClass: IonicRouteStrategy
}

Answer 2

我不太了解您的问题，但是默认情况下，Angular 不允许您两次导航到同一个 url，您必须启用它。

onSameUrlNavigation: 'reload' | 'ignore'    
How to handle a navigation request to the current URL. One of:
'ignore' : The router ignores the request.
'reload' : The router reloads the URL. Use to implement a "refresh" feature.

https://angular.io/api/router/Router#config

Answer 3

要重定向到 Angular 中的同一页面，您需要执行以下操作：

<a routerLink=".">Navigate!</a>

这就像一个相对路径，告诉 Angular 我想留在当前路线中。

Answer 4

您可以使用<ion-tabs>

   <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon src="assets/icons/navbar/home.svg" size="large"></ion-icon>
          <ion-label>home</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

Answer 5

您可以使用

ActivatedRoute：

export class Component implements OnInit {
  constructor(private _router:Router,
              private _route:ActivatedRoute){}
  ngOnInit() {
        this._route.params.subscribe(params => {
        this.param = params['yourParam'];
        this.getData(this.param); // reset and set based on new parameter this time
    });
  }
    getData(id) {} // get data from API
}