備忘錄_20160105(定位) 修改 回首頁

程式 2020-03-25 23:08:35 1585148915 100
閱讀 IONIC 4+ 的心得 PART 12 - popover

閱讀 IONIC 4+ 的心得 PART 12 - popover
[cmd] ionic g component pages/about

在 src/app/pages/about/about.component.html 裡面,編輯
<div style="text-align:cneter;" padding>
  <h3>TITLE</h3>
  <small>small words!</small>
  <p>Author ......</p>
  <small>© 2019</small>
</div>

在 app.module.ts 裡面,加入
import { AboutComponent } from './pages/about/about.component';
@NgModule
({
  declarations: [AboutComponent, ......],
  entryComponents:[AboutComponent], ......
})

在 app.component.ts 裡面,加入
import { PopoverController } from '@ionic/angular';
import { AboutComponent } from './pages/about/about.component';
export class AppComponent
{
  constructor
  (
    private popoverCtrl:PopoverController
  )
  {}

  async about()
  {
    const popover=await this.popoverCtrl.create
    ({
      component:AboutComponent,
      translucent:true
    });
    await popover.present();
  }
}

在 app.component.html 裡面,加入

<ion-list>

  <ion-menu-toggle *ngFor="let p of addPages"
  </ion-menu-toggle>

  <ion-item (click)="about()">
    <ion-icon slot="start" name="information-circle"></ion-icon>
    <ion-label>About this app</ion-label>
  </ion-item>

</ion-list>