Question

我无法弄清楚如何将数据从登录页面表单传递到Ionic中的选项卡。这是我的代码，它保存数据并将其推送到选项卡，但它不起作用。

登录页面

export class LoginPage {
  private login : FormGroup;

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
    this.login = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
  }
  goToVoti(){
    this.navCtrl.push(TabsControllerPage, {
    username: this.login.value.username,
    password: this.login.value.password});
  }
}

我是否必须首先将数据传递给TabsController，然后传递到所需的页面？如果有，怎么样？

Answer 1

来自Ionic Documentation：

class StartPage {
  constructor(public navCtrl: NavController) {
  }

  pushPage(){
    // push another page onto the navigation stack
    // causing the nav controller to transition to the new page
    // optional data can also be passed to the pushed page.
    this.navCtrl.push(OtherPage, {
      id: "123",
      name: "Carl"
    });
  }
}

class OtherPage {
  constructor(private navParams: NavParams) {
     let id = navParams.get('id');
     let name = navParams.get('name');
  }
}

标签示例：

class HomePage {

  constructor(public navCtrl: NavController) {}

  pushData = () => {
    this.navCtrl.push(TabsPage, {
      username: 'Marko',
      lastname: 'Savic',
    })
    this.navCtrl.parent.select(1);
  }

}

class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor(private navParams: NavParams) {
    let username = navParams.get('username');
    let lastname = navParams.get('lastname');

    console.log(username);
    console.log(lastname);
  }
}

在关于页面上可以看到

用户名和姓氏。

有关NavController here的更多信息。

希望这有帮助。

Answer 2

由于我必须传递登录数据，我决定将它们存储在本地，所以我使用了IonicStorage：https://ionicframework.com/docs/storage/

这就是我所做的：

我存储了登录表单中的数据：

setData(){
this.storage.set('username', this.login.value.username)
this.storage.set('password', this.login.value.password)
console.log('Data set')
}

然后我在goToVoti（）

我在页面加载时检索了另一页中的数据：

ionViewDidLoad() {
console.log("Data loaded");
this.storage.get('username').then((val: string) => {
    console.log(val)
    this.email = val
  });
this.storage.get('password').then((val: string) => {
    this.password = val
    console.log(val)
  });
}

将数据从表单传递到Ionic中的选项卡

2 个答案: