[onic]ion 콘텐츠가 원활하게 작동하지 않을 때 체크포인트

3523 단어 ionicion-content
ion content를 사용하는 페이지에서 도저히 의도대로 할 수 없음을 표시합니다
각양각색의 고전 끝에 마침내 자신이 예상치 못한 잘못을 저질렀다는 것을 알아차리지 못했다.
개인적으로 반성합니다. 조심하지 않고div를 사용하지 말고 ng-container를 사용하는 것이 좋습니다.
버전 등
  • Ionic 6.15.0
  • Angular: 10.0.14
    • 사적인 결론
  • ion 콘텐츠 상위에 div를 사용하지 않습니다.*ngIf 등을 사용하려면 ng-container를 사용하십시오.
    • 현상.
  • ion-contentent를 사용한 페이지에는 왠지 필요 없는 스크롤 등이 나타나 의도하지 않은 상태가 됐다.
  • 크롬의 devlopment tool을 통해 확인한 결과 ion content의 크기가 의도대로 (생각보다 높이가 작음)되지 않은 것으로 나타났다.
    • 수정 전 코드
  • 고장난 코드는 다음과 같다.
  • isShowIntro가 진짜일 때만 설명이 표시됩니다.app-introduction, app-title는 자체 제작된 구성 요소입니다.
  • 실제로 동작은 이 코드에서도 의도대로 진행되었지만ion 콘텐츠의 높이는 왜 페이지 크기보다 작은지 모르겠다.
    • start.page.}(문제 있음)
    <div *ngIf="isShowIntro">
  <app-introduction></app-introduction>
</div>
<div *ngIf="!isShowIntro">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>{{'APPTITLE'| translate }}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content [fullscreen]="true">
    <app-title></app-title>
  </ion-content>
</div>

    수정된 코드
  • div 대신 ng-container를 사용하면 정상적으로 작동할 수 있습니다.
    • start.page.}(장애 없음)
    <ng-container *ngIf="isShowIntro">
  <app-introduction"></app-introduction>
</ng-container>
<ng-container *ngIf="!isShowIntro">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>{{'APPTITLE'| translate }}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content [fullscreen]="true">
    <app-title></app-title>
  </ion-content>
</ng-container>

    고찰하다.
  • 공식 페이지도 잘 보이지만 온콘텐츠 상위에 불필요한 태그를 붙이지 못한다는 기록이 없어 도저히 문제를 알아채지 못했다.
  • 비슷한 현상으로 고민하는 사람이 있다면 확인해 보세요.
    • 주옥: 데 이 터 를 자세히 연구 한 토대 에서 프로그램의 구 조 를 얻 을 수 있다.
    매니풀란도 컨테이너 Docker

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage