Question

我正在使用ionic 4 Framework创建一个项目，我在关注这个项目：https://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/

问题是这是为Ionic 3制作的，它要求我导入ViewController，但已弃用。

我要做的就是将客户的信息保存到一个数组中，然后将其分配到列表中。

这是我到目前为止所掌握的。

new-client.page.html

  <button (click)="popup()" type="button" name="button" class="pic" no-padding><p>Tap to add picture</p><img src="{{ myPhoto }}" alt=""></button>
  <br>
  <ion-item>
    <ion-label position="stacked" class="sc-ion-label-h sc-ion-label-s label-stacked hydrated" id="ion-input-1-lbl">Full Name <ion-text color="danger" class="ion-color ion-color-danger hydrated">*</ion-text></ion-label>
    <ion-input autocapitalize="on" [(ngModel)]="name"></ion-input>
  </ion-item>
  <ion-item class="item ios in-list ion-focusable item-label item-label-stacked item-interactive item-input item-has-placeholder hydrated">
    <ion-label position="stacked" class="sc-ion-label-h sc-ion-label-s label-stacked hydrated" id="ion-input-2-lbl">Details</ion-label>
    <ion-input placeholder="Phone Number" type="tel" [(ngModel)]="phone"></ion-input>
    <ion-input placeholder="Email Address" type="email" [(ngModel)]="email"></ion-input>
  </ion-item>
  <ion-item class="item ios in-list ion-focusable item-label item-label-stacked item-interactive item-textarea item-input hydrated">
    <ion-label position="stacked" id="ion-input-0-lbl" class="Nuts">Notes</ion-label>
    <ion-textarea [(ngModel)]="extra"></ion-textarea>
  </ion-item>
  <ion-card>
    <button class="save" (click)="save()"><p>Save Contact</p></button>
    </ion-card>

new-client.page.ts

mport { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActionSheetController } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/Camera/ngx';
import { NavController, ModalController } from '@ionic/angular';


@Component({
  selector: 'app-new-client',
  templateUrl: './new-client.page.html',
  styleUrls: ['./new-client.page.scss'],
})
export class NewClientPage implements OnInit {

myPhoto:any;
name: string;
phone: string;
email: string;
extra: string;

  constructor(private router: Router, private actionSheet: ActionSheetController, private camera: Camera, private modalCtrl:ModalController) { }
  goBack(){
    //this.router.navigateByUrl('/')
    this.modalCtrl.dismiss();
  }
async save() {
    let newItem = {
     name: this.name,
     phone: this.phone,
     email: this.email,
     extra: this.extra
   };
   await this.modalCtrl.dismiss(newItem);
  }
  ngOnInit() {
  }

}

tab-3.html

  <ion-list>
    <ion-item *ngFor="let item of items" (click)="viewItem(item)"><ion-card>
  <ion-card-header>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
    <ion-card-title>{{item.title}}</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    {{item.description}}
  </ion-card-content>
</ion-card></ion-item>
  </ion-list>

tab-3.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController, NavController } from '@ionic/angular';
import { NewClientPage } from '../new-client/new-client.page'


@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  public items;

  constructor(private router: Router, public modalController: ModalController) {}
  ionViewWillEnter(){
    this.items = [
      {title: 'Hello', description: 'A word to greet'},
      {title: 'World', description: 'Where most of us live'}
    ];
  }
  async go(){
    const modal = await this.modalController.create({
      component: NewClientPage
    });
    return await modal.present()//this.router.navigateByUrl('/new-client');
  }
}

Answer 1

您错过了go方法中的以下代码。这是一个回调函数，将在消除模式时执行。

async go(){
    const modal = await this.modalController.create({
      component: NewClientPage
    });

    <!-- You missed this part -->
    modal.onDidDismiss((item) => {
        if(item){
          this.items.push(item);
        }
    });

    return await modal.present()//this.router.navigateByUrl('/new-client');
}

从ModalController传递数据时出现问题

1 个答案: