ionic-team / ionic-team/ionic-framework
Ionic router. OnInit working only once
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
# 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.
Hướng dẫn đóng góp
Hướng nghiên cứu
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.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 28/100