ionic-team / ionic-team/ionic-framework
Ionic router. OnInit working only once
- 主要语言
- 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