ionic-team / ionic-team/ionic-framework

bug: Navigation stops working for nested ion-router-outlet

Ouverte
#18,197 9 commentaires 11 réactions 1 personne assignée Réclamée par @mhartington Voir sur GitHub
package: angular type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# Bug Report

**Ionic version:**
[x] **4.3.1**

**Current behaviour:**

Using child-routes stops working using nested `ion-router-outlet`s.
Issues that could be related: #17638, #17825.

**1st**

If `links` and `ion-router-outlet` are placed inside `ion-content` links are not clickable.

```html

App One
App Two

```

If links are placed outside `ion-content` they are clickable.

```html

App One
App Two

```

**2nd**

Only the first navigation to a child route works.
After this, the view is not updated anymore.

![navigation-stops-working gif sb-3cdeef4e-ewqEiw](https://user-images.githubusercontent.com/444278/57130034-942dd900-6d98-11e9-9425-52d3c4749190.gif)

**Expected behaviour:**

- A click on a link should navigate to the corresponding component configured in the routing module.

**Steps to reproduce:**

- `git clone https://github.com/GregOnNet/ionic-4-jest-setup.git`
- `cd ionic-4-jest-setup.git`
- `git checkout routing`
- `npm install`
- `ionic serve`
- Visit http://localhost:8100/tabs/tab2
- Click on _App One_
- Click on _App Two_
- Note that navigation stops working

**Related code:**

- https://github.com/GregOnNet/ionic-4-jest-setup/tree/routing
- ⚠️ You need to checkout branch **routing**

**Ionic info:**

```
Ionic:

ionic (Ionic CLI) : 4.12.0 (/Users/gregor/.config/yarn/global/node_modules/ionic)
Ionic Framework : @ionic/angular 4.3.1
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.8
@angular/cli : 7.3.8
@ionic/angular-toolkit : 1.5.1

System:

NodeJS : v10.15.3 (/Users/gregor/.nvm/versions/node/v10.15.3/bin/node)
npm : 6.4.1
OS : macOS Mojave
```

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.