在离子

时间:2018-01-04 11:25:10

标签: angular ionic-framework ionic2 ionic3

简要说明:尝试在home.html页面上实施popover控制器。试图按照文档但仍然无法通过。

我在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();
    }
  }

1 个答案:

答案 0 :(得分:5)

尝试这个

<强> 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();
    }
  }