한 편의 글 은 Angular 와 Ionic 의 생명주기 와 갈고리 함 수 를 빠르게 이해한다.

Angular
이루어지다
우선 실현 방식 은 말 할 필요 도 없 이 갈고리 함 수 를 사용 하려 면 정의 할 때 대응 하 는 인 터 페 이 스 를 실현 해 야 한다.

export class ListPage implements OnInit {
  constructor() {}

  ngOnInit() {
    // code here
  }
}

호출 순서
1、constructor
가장 먼저 실행 되 는 것 은 구조 함수 입 니 다.구조 함 수 를 실행 할 때@Input,@ViewChild 등 많은 변 수 는 존재 하지 않 습 니 다.관련 작업 은 ngOnInit 에 쓰 는 것 이 좋 습 니 다.
2、ngOnChanges
현재 구성 요소@Input/@Output 의 바 인 딩 값 이 변 경 될 때 실 행 됩 니 다.
또한@Input 이 대상 이 라면 인용 이 변 경 된 경우 에 만 트리거 됩 니 다.
3、ngOnInit
첫 번 째 ngOn Changes 완료 후 호출,한 번 만 실행
4、ngDoCheck
개발 자 사용자 정의 변경 검사.
5、ngAfterContentInit
구성 요소 내용 초기 화 시 한 번 실행
6、ngAfterContentChecked
구성 요소 에 투 사 된 내용 은 ngDoCheck 호출 될 때마다 실 행 됩 니 다.
7、ngAfterViewInit
구성 요소 및 하위 구성 요소 보기 가 초기 화 될 때 한 번 실행 합 니 다.
8、ngAfterViewChecked
구성 요소 와 하위 구성 요소 보 기 는 매번 ngDoCheck 호출 후 실 행 됩 니 다.
9、ngOnDestroy
구성 요소 가 소각 되 기 전에 호출 합 니 다.
주의 하 다.

모든 데이터 가 constructor 에 존재 하 는 것 은 아 닙 니 다.@ViewChild@ViewChildren@Input 등 값 이 연결 되 지 않 았 습 니 다

모든 변경 검 사 는 ngDoCheck 을 촉발 합 니 다.상세 하 게 보다성능 이 매우 소모 되 므 로 조심해 서 사용 해 야 합 니 다

Ionic
원본 문 서 는 위의 링크 를 눌 러 볼 수 있 으 니 요점 을 골 라 서 말 하 세 요.

생명 주 기 는 그림 과 같 습 니 다.angular 가 제공 하 는 생명 주 기 를 제외 하고 ionic 는 몇 가지 사건 을 추 가 했 습 니 다.

ionViewWillEnter 경로 구성 요소 가 보기 로 표 시 됩 니 다

ionViewDidEnter 경로 구성 요소 가 보기 로 표시 되 었 습 니 다

ngOnInit 이후 ionViewWillEnter 를 터치 합 니 다.페이지 전환 의 과도 효과 가 끝 난 후 ionViewDidEnter 를 터치 합 니 다.

ionViewWillLeave 는 현재 경로 의 구성 요소

를 떠 날 것 입 니 다.

ionViewDidLeave 는 현재 경로 의 구성 요소

를 떠 났 습 니 다.
ionViewWillLeave 를 먼저 호출 하고 새 페이지 로 성공 적 으로 넘 어간 후에(새 페이지 ionViewDidEnter 가 실 행 된 후에)ionViewDidLeave 가 호출 되 었 습 니 다.
ion-nav 나 ion-router-outlet 을 사용 하 는 구성 요 소 는 OnPush 변화 검출 전략 을 사용 해 서 는 안 됩 니 다.그러면 ngOnInit 와 같은 수명 주기 hooks 가 실행 되 지 않 습 니 다.또한 비동기 변 화 된 데 이 터 는 정확하게 렌 더 링 되 지 않 을 수 있 습 니 다.
ionic 는 페이지 의 생명 주 기 를 어떻게 처리 합 니까?
ionic 에서 사용 하 는 루트 출구 는입 니 다.angular 의를 확장 하여 모 바 일 장치 에서 더욱 좋 은 체험 을 할 수 있 습 니 다.
한 페이지 에서 새 페이지 로 넘 어 갈 때,ionic 는 오래된 페이지 를 dom 에 저장 하고 보기 에서 숨 깁 니 다.이렇게 하면 이전 페이지 의 상 태 를 유지 할 수 있 습 니 다.예 를 들 어 스크롤 위치,페이지 데이터 등 입 니 다.이렇게 하면 새 페이지 에서 이전 페이지 로 돌아 갈 때 다시 불 러 오지 않 아 도 되 고 페이지 과도 도 부 드 럽 습 니 다.
페이지 는 스 택 에서 물 러 날 때 만 진정 으로 소각 되 기 때문에 ngOnInit 와 ngOnDestroy 가 촉발 하 는 시기 가 생각 과 다 를 수 있 습 니 다.
예 를 들 어 A 는 상세 한 페이지 이 고 B 페이지 에 들 어가 데 이 터 를 수정 합 니 다.수정 이 완료 되면 B 페이지 에서 A 페이지 로 돌아 갑 니 다.
만약 에 A 페이지 의 데이터 획득 방법 이 ngOnInit 에 쓰 여 있다 면 B 에서 A 로 돌아 갈 때 ngOnInit 가 촉발 되 지 않 기 때문에 업무 요구 에 부합 되 지 않 습 니 다.
따라서 이 데 이 터 를 가 져 오 는 것 은 ionView WillEnter 에 쓸 수 있 습 니 다.그러면 B 에서 A 로 돌아 갈 때 트리거 하고 업데이트 할 수 있 습 니 다.
경로 수비
Ionic 3 에 서 는 ionViewCanEnter 와 ionViewCanLeave 두 개의 갈고리 함수 가 있 었 습 니 다.페이지 가 들 어 갈 수 있 는 지,떠 날 수 있 는 지 를 판단 하 는 데 사 용 됩 니 다.일반적으로 접근 권한 을 제한 하거나 편집 페이지 를 떠 나 기 전에 두 번 의 확인 알림 을 팝 업 합 니 다.이 두 함 수 는 이미 폐기 되 었 으 며,Ionic 4 이후 angular 공식경로 수비을 사용 합 니 다.
총결산
Angular 와 Ionic 수명 주기 와 갈고리 함수 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Angular Ionic 수명 주기 와 갈고리 함수 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!