Ionic modal pass data to component 사용 예시 Angular

closeModal(){
    this.modalController.dismiss({
      dismissed: true,
      data: 'ㅋㅋ',
    });
  }

1. 모달 컴포넌트 : 모달 종료 시 데이터 ''ㅋㅋ" 를 전달해보겠습니다. 

2. data : 라는 변수명은 데이터를 받을 컴포넌트의 변수명과 일치해야 합니다.

 

 

 async openModal() {
    // modal 생성 시점
    const modal = await this.modalController.create({
      component: UpdateAdminModal,
      componentProps: {
        admin: this.admin,
      },
    });

    modal.onDidDismiss().then((res: any) => {
      // modal 닫히는 시점
      console.log(res['data']);
      if (res) {
        const admin: Admin = res['data'].admin;
        console.log(admin.name);
        console.log(admin.id);
        this.admin = {
          name: admin.name,
          id: admin.id,
          password: admin.password,
          tel: admin.tel,
          registeredAt: admin.registeredAt,
          auth: admin.auth,
          position: admin.position,
        };
      }
    });

2. 페이지 컴포넌트에서 모달 종료 시 데이터를 꺼내 확인합니다.

3. res['data'] 여기서 data 는 선언한 변수명 아닙니다.

4. 따라서 변수명까지 접근하기 위해선 뒤에 .변수명 으로 접근하세요!

 

 

 

 

closeModal() {
    this.modalController.dismiss({
      admin: this.admin,
    });
  }

3. 반대로 모달에서 일반 컴포넌트로 데이터를 전달 할 시 modalController.dismiss 함수에 해당 객체를 담아 보낼 수 있습니다.

 

 

 

 

 

4. 해당 객체에 접근하려면 res['data'] 후