ionic-team / ionic-team/ionic-framework
feat: expose life cycle hooks to every components
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 14 giờ
- Pull request đã merge (30 ngày)
- 50
Mô tả
### 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_
Hướng dẫn đóng góp
Hướng nghiên cứu
Không có tệp triển khai hoặc bài kiểm thử nào được nêu. Trước tiên, hãy lần theo hệ thống vòng đời của page và tích hợp của nó với Angular Router, sau đó xác định cách các hook chỉ được dispatch đến page. Công việc được xem là hoàn tất khi các hook được yêu cầu được kích hoạt cho các component không phải page vào đúng thời điểm, bao gồm cả trường hợp sử dụng autofocus.
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
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- 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
- 32/100