离子选择，离子输入并在第二页检索其值答案

【问题标题】：ion-select, ion-input and retrive its value on second page离子选择，离子输入并在第二页检索其值
【发布时间】：2020-01-04 23:53:45
【问题描述】：

我从离子选择器中获取数值并在离子输入器中输入一个数字。如何将所选值和输入值从原始页面显示到另一个页面？我正在使用离子 4

<ion-item>
           <ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad" 
                      name="userCount" (keypress)="numberOnlyValidation($event)"></ion-input>
</ion-item>

<ion-item (click)="openSelect()">
           <ion-input [(ngModel)]="selectedCode"></ion-input>
</ion-item>
<ion-item style="display: none">
           <ion-select #select1 [(ngModel)]="selectedCode">
           </ion-select>
</ion-item>

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

这是一种解决方案。假设输入在 home.page 中，值将被路由到 page2.page。

更新 app-routing.module.ts 并添加新路由

{
  path: 'page2/:code/:numpad',
  loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
},

然后您将需要从 home.page 获取值并导航到第 2 页。有几种不同的方法可以做到这一点。在下面的示例中，我只是使用 ionChange 来调用一个函数来路由到 page2。

主页.page.ts

<ion-item>
   <ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad" name="userCount"></ion-input>
</ion-item>
<ion-item>
  <ion-select [(ngModel)]="selectedCode" (ionChange)="valueChangedSoRouteToPage2()">
    <ion-select-option *ngFor="let user of users" [value]="user.id">{{user.first + ' ' + user.last}}</ion-select-option>
  </ion-select>
</ion-item>

然后在 home.page.ts 你可以做这样的事情

valueChangedSoRouteToPage2() {
  console.log('changed');
  console.log(this.selectedCode);
  console.log(this.numpad);
  this.router.navigateByUrl('/page2/' + this.selectedCode + '/' + this.numpad);
}

最后一步 - 更新 page2.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

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

  page2Code;
  page2Numpad;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.page2Code = this.activatedRoute.snapshot.paramMap.get("code");
    this.page2Numpad = this.activatedRoute.snapshot.paramMap.get("numpad");

    console.log('code: ' + this.page2Code);
    console.log('numpad: ' + this.page2Numpad);

  }
 }

希望这会有所帮助。

【讨论】：

谢谢 Rich，我在最后一步遇到了问题。激活的路由不存在。在 ngOnInit() 下的构造函数中导入并调用了activatedRoute
我编辑了我的原始回复并包含了所有 page2.page.ts，以防我忘记提及一些重要的事情。我还在我的 github 上创建了一个repo，您可以使用它来与您的应用进行比较。
谢谢里奇。我对其进行了一些修改以适合我的代码并且它有效