ionic-team / ionic-team/ionic-framework

feat: expose life cycle hooks to every components

Offen
#30,421 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
triage
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

I would like to be able to listen to life cycle hooks such as: ionViewWillEnter(), ionViewDidEnter(), and so on, on components that are not pages.

### Describe the Use Case

This would for example, allow to set the auto focus to an input directly from the component that contains the input and instead of doing it through the page that access the input inside of a component that is present on the page.

### Describe Preferred Solution

Make components methods such as ionViewDidEnter callable by the life cycle system that calls them on pages.

### Describe Alternatives

For now, I thought of using this:

```ts
import { inject, Injectable } from "@angular/core"
import { NavigationEnd, Router } from "@angular/router"
import { Subscription, filter } from 'rxjs'

type IonViewDidEnterable = {
ionViewDidEnter(): void
}

@Injectable()
export class LifeCycleService {

private router = inject(Router)

private sub: Subscription
hostComponent!: IonViewDidEnterable

constructor() {
const componentUrl = this.router.url

this.sub = this.router.events
.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
.subscribe(() => {
if (componentUrl !== this.router.url) {
return
}

this.hostComponent.ionViewDidEnter()
})
}

ngOnDestroy() {
this.sub.unsubscribe()
}
}

export class MyComponent {
_ = inject(LifeCycleService).hostComponent = this

ionViewDidEnter() {
}
}
```

But this is not ideal because ionViewDidEnter is called too early doing so. Thus, setting the focus on an input at this time does not work as expected. This could be solved by setting a timeout on the ionViewDidEnter call but that is not ideal.

### Related Code

_No response_

### Additional Information

_No response_

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.