簡體   English   中英

在Ionic中實現彈出式控制器

[英]Implementing popover controller in Ionic

簡要說明:嘗試在home.html頁面上實現彈出控件。 嘗試遵循文檔,但仍然無法通過。

我創建popover.ts頁面旁邊home.ts但是當我試圖在導入home.ts ,跟它Cannot find module 'popover'

我究竟做錯了什么 ?

home.ts

import { PopoverController } from 'ionic-angular';
import { PopoverPage } from 'popover';

    @Component({})
    class MyPage {
      constructor(public popoverCtrl: PopoverController) {}

      presentPopover(myEvent) {
        let popover = this.popoverCtrl.create(PopoverPage);
        popover.present({
          ev: myEvent
        });
      }
    }

popover.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';


@Component({
    template: `
      <ion-list>
        <ion-list-header>Ionic</ion-list-header>
        <button ion-item (click)="close()">Learn Ionic</button>
        <button ion-item (click)="close()">Documentation</button>
        <button ion-item (click)="close()">Showcase</button>
        <button ion-item (click)="close()">GitHub Repo</button>
      </ion-list>
    `
  })
  class PopoverPage {
    constructor(public viewCtrl: ViewController) {}

    close() {
      this.viewCtrl.dismiss();
    }
  }

試試這個

home.ts

import { PopoverController } from 'ionic-angular';
import { PopoverPage } from './popover';

    @Component({})
 export class MyPage {
      constructor(public popoverCtrl: PopoverController) {}

      presentPopover(myEvent) {
        let popover = this.popoverCtrl.create(PopoverPage);
        popover.present({
          ev: myEvent
        });
      }
    }

popover.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';


@Component({
    template: `
      <ion-list>
        <ion-list-header>Ionic</ion-list-header>
        <button ion-item (click)="close()">Learn Ionic</button>
        <button ion-item (click)="close()">Documentation</button>
        <button ion-item (click)="close()">Showcase</button>
        <button ion-item (click)="close()">GitHub Repo</button>
      </ion-list>
    `
  })
  export class PopoverPage {
    constructor(public viewCtrl: ViewController) {}

    close() {
      this.viewCtrl.dismiss();
    }
  }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM