web-dev-qa-db-ja.com

ionic 4 + angular：routerLinkは初めてのみ機能します

現在、基本的なアプリをゼロから開発しているときに、奇妙なバグが発生しています。 Ionic 4 beta 19を使用し、routerLinkを別のページに配置した場合、ルートは次のようにベースページモジュールで設定されます。

RouterModule.forChild([
  { path: '', component: NewsPage },
  { path: ':id', component: DetailPage }
])

routerLink属性はカードに設定されており、カードをクリックしても問題なく機能しますが、戻って同じカードまたは別のカードを押すと、ルーターはまったく何もしません。エラーは発生せず、ブラウザのURLは完全に機能しています。どうすればいいの？

編集：また、DetailPageにはモジュールがないため、基本的には単なるページです。

編集：カードコードは次のようになります。

<ion-card *ngFor="let item of items;" [routerLink]="[item.id]">
  ...
</ion-card>

詳細ページでは、ルートパラメータがサブスクライブされ、データを取得するためのGETリクエストサブスクリプションに：idパラメータが使用されます

angularionic-frameworkangular-routingionic4
10
Yassine Zeriouh

これはすでに修正されています。_npm i @ionic/angular_を実行して、修正バージョン4.2.0以降に更新してください。

これはrouter.navigate(['url', params])機能にも影響していました

4
Lovenkrands

次のように代わりにnavigateByUrlを使用して解決しました。

open(id: number) {
  this.router.navigateByUrl(this.router.url + '/' + id);
}

カードの場合：

<ion-card *ngFor="let item of items;" (click)="open(item.id)">
    ...
</ion-card>

なぜこれが起こっているのかはまだわかりませんが、これは今のところ回避策として機能します。

4
Yassine Zeriouh

これは既知のバグです。 GitHubの問題は次の場所にあります： https://github.com/ionic-team/ionic/issues/16534 。

上記の@marioで述べたように、絶対リンクはrouterLinkで機能します。ここのコメントを参照してください： https://github.com/ionic-team/ionic/issues/16534#issuecomment-4446103

2
Nicholas Pretorius

可能であれば、回避策は このgithub answer で述べられているように相対パスではなく絶対パスを使用することです：

この問題は未解決のままにしておき、修正を試みますが、それは簡単なことではなく、絶対パスを使用することは良い回避策です！

私たちはこの問題を認識しています:)

だからあなたは：

<ion-item routerLink="/home" />

の代わりに ：

<ion-item routerLink="home" />
1
Stephane L

実行することでこのバグを修正できます
npm i @ionic/angular

0
felmez