ionic-framework - Ionic 3: ion- auto-complete - 如何传递除自动完成生成的数据以外的不同数据

Question

我在 ionic 3 框架中创建了一个自动完成功能。

app.component.html

<form [formGroup]="myForm" (ngSubmit)="openModal()">
    <div class="ion-form-group">
      <ion-auto-complete [dataProvider]="ionAutoCompleteService" 
      [options]="{ placeholder : 'Search an Institution' }" formControlName="institution"
        required>
      </ion-auto-complete>
    </div>
    <button [disabled]="!myForm.valid" icon-left ion-button type="submit" block>
      <ion-icon name="link"></ion-icon>
      Link Institution
    </button>
  </form>

为此，我还创建了服务提供者，如下所示

import {AutoCompleteService} from 'ionic2-auto-complete';
import { Http } from '@angular/http';
import {Injectable} from "@angular/core";
import 'rxjs/add/operator/map'

@Injectable()
export class IonicAutoCompleteService implements AutoCompleteService {
  labelAttribute = "name";

  constructor(private http:Http) {

  }
  getResults(keyword:string) {
    return this.http.get("https://aqueous-oasis-93790.herokuapp.com/institutions/search?name="+keyword)
      .map(
        result =>
        {
          console.log(result)
          return result.json().institutions
            .filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()) )
        });
  }
}

该服务为我提供了从 json 文件中检索的机构名称。要访问此服务，我只需将服务导入 app.component.ts 文件 app.component.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { IonicAutoCompleteService } from '../../../services/ionic-autocomplete.service';
import { AddAccountModalPage } from './add-account-modal/add-account-modal';


@IonicPage()
@Component({
  selector: 'page-add-account',
  templateUrl: 'add-account.html',
})
export class AddAccountPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,
              public ionAutoCompleteService:IonicAutoCompleteService,
              public modalCtrl:ModalController) {
  }

  ngOnInit(): void {  }

  myForm = new FormGroup({
    institution: new FormControl('', [Validators.required])
  })

  submit(): void {
    console.log(this.myForm.value.institution)
  }
  onClick() {
    console.log("img clicked")
  }
  openModal() {  
    let modal = this.modalCtrl.create(AddAccountModalPage);
    modal.present();
  }

}

我的问题是，当我提交表格时，搜索框中的值将被提交，即机构名称。我想将机构名称发送到以下离子模式我还想将机构 ID 作为模式参数发送，如(ngSubmit)="openmodal(institution_id)"app.component.html 文件中

模态的.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Add Account Modal
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

模态的.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-add-account-modal',
  templateUrl: 'add-account-modal.html',
})
export class AddAccountModalPage {
  institution = "india"

  constructor(public navCtrl: NavController, public navParams: NavParams,
              public viewCtrl: ViewController) {
  }
  ionViewDidLoad() {

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

}

标签： ionic-frameworkautocompleteangular6

Answer 1

您可以发送如下参数：

  openModal() {  

 let Modal = this.modalCtrl.create(AddAccountModalPage,
      { institution: this.formGroup.get('institution').value
      });
        Modal.present();
}

在modal.ts中获取这个参数后：

  institution: any;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public viewCtrl: ViewController) {
  }

 ngOnInit() {  
    this.institution= this.navParams.get('institution');
  }