ionic-team / ionic-team/ionic-framework

Ionic router. OnInit working only once

未关闭
#17,853 49 条评论 9 个 reaction 已指派 0 人 在 GitHub 查看
package: angular type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

# Bug Report

**Ionic version:**
[x] **4.1.0**

**Current behavior:**
Ionic router run OnInit only first time

**Expected behavior:**
Run OnInit each time

I have an app with Angular. It is a simple list of items, after clicking on an item opened item details page. Two routes:
- IndexComponent. Items list.
- ItemDetailsComponent. Edit item page

```
const routes: Routes = [
{
path: 'index',
component: IndexComponent
},
{
path: 'item/:id',
component: ItemDetailsComponent
}
];
```

I use ItemsService -> get/save items.

```
export class IndexComponent implements OnInit {
public items: Array;

constructor(private itemsService: ItemsService) {
}

ngOnInit() {
this.itemsService.getItems()
.subscribe(data => this.items = data)
}
}
```

```
export class ItemDetailsComponent implements OnInit {
public item: Item;

constructor(private route: ActivatedRoute,
private itemsService: ItemsService) {
}

ngOnInit() {
const id = this.route.snapshot.params['id'];
this.itemsService.getItem(id)
.subscribe(data => this.item = data)
}
}
```

In Angular application, OnInit lifecycle event working each time when I open these pages.
And it is fine. I should edit an item on ItemDetailsComponent, and after clicking back to IndexComponent I see new information.

I start an Ionic project. Changed `router-outlet` to `ion-router-outlet`
Same structure, same routing.
And now:

- IndexComponent OnInit working the only first time. When I back to this page from ItemDetailsComponent - OnInit not rerun. Ionic reuse IndexComponent, But I need a new instance.

- ItemDetailsComponent OnInit working the only first time for each item in the items list.
But if I edit an item, return back to IndexComponent, update items handly(click a button, because OnInit not work). And open ItemDetailsComponent again - I see old information because OnInit not firing - this is an old instance.

贡献指南

打开贡献指南

调研方向

Start with the ion-router-outlet and the Angular route definitions shown in the report, then reproduce navigation between IndexComponent and ItemDetailsComponent. Check how component reuse affects ngOnInit and confirm that returning to the list and reopening an item shows current data without manual refreshes.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
28/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。