Ionic Page and component relationship

Good morning everybody and good coding!

I’m building an app using Ionic 6.17.1 and I’m facing what I think is a basic concept but I’m not able to figure it out regarding the use of a page and the use of a component. I read the documentation but I’m a little confused and I think I’m mixing things a little bit…

I’ve created 3 different pages, we’ll call it tasks due, open and scheduled, each of them has very similar information, so to reuse the code I decided to decouple the visualization of a list of tasks and the visualization of an individual task I created 2 components: show and list.

Each component receives an @Input parameter, task for the show and elements for the list, It seems prety straight forward… and I used on the app using tabs, on each page (due, open and scheduled) the following code to display a component show or a component list:

<app-list *ngIf="dataLoaded" 
        [elements]="openItems" 
        title="Open Items"
        source="TabOpen"
        (item)="showItem($event)"
    ></app-list>

and in case a showItem is clicked, I show:

 <div *ngIf="mode == 'show' ">
    <app-show *ngIf="item" 
        [item]="item"
        (backEvent)="showList($event)"
        ></app-show>

Now the problem or mis-conception: If I start the app it shows the first tab and a list of tasks, and if click on a task it shows the component show, as it should.

If I come back it works perfectly well also, but everything falls apart when I click a second tab (page due for example) and then I come back to the open tab and then click on a task.

It’s like the tab-open is called twice, like overlapping. In fact If then I click on the back button I see that the tab-open is called but I don’t go back, and on a second click it works:

TabOpen::Did Enter [tab-open.page.ts:52:12](webpack:///src/app/tab-open/tab-open.page.ts)
TabOpen::showList(): triggered [tab-open.page.ts:142:12](webpack:///src/app/tab-open/tab-open.page.ts)
TabOpen::showList(): end. [tab-open.page.ts:150:12](webpack:///src/app/tab-open/tab-open.page.ts)
TabOpen::showList(): triggered [tab-open.page.ts:142:12](webpack:///src/app/tab-open/tab-open.page.ts)
TabOpen::showList(): end. [tab-open.page.ts:150:12](webpack:///src/app/tab-open/tab-open.page.ts)
Component::list(): On Init [list.component.ts:29:12](webpack:///src/app/components/list/list.component.ts)
Source: TabOpen

The question: is a correct architecture to have multiple pages each of them re-using the same components? or is an aberration and it’s the reason everything starts falling apart?

Thanks in advance.

11 posts - 3 participants

Read full topic