Question

我是离子的新手，我想知道如何将

html标签之间的数据传递给我的home.ts文件。我试过做getElementById，但这似乎不起作用。也是ViewChild但结果为零。我想就这个问题提供一些帮助。

Answer 1

来自.ts - ＆gt; html：

.ts-＆GT; varString : String = "Hallo world"; HTML-＆GT; {{varString}}

来自html - ＆gt; .ts取决于html标签

实施例。 <input type=“text” name=“username” [(ngModel)]=“username”> 用户名是username : String = "";，它会更改您更新输入的时间。与其他html标签类似。您还可以使用Element离子角度

按ID或类获取元素

Answer 2

有很多方法可以在html和ts之间传递数据，但是你必须对MVC设计模式有很好的理解。 MVC是谷歌为什么引入角度的原因。

在angular（离子引擎）中，您的View（项目中的html）知道控制器（ts文件）的所有内容。

***** home.ts ********

public MyName:string="jon";

 MyFunc1() 
  {
   alert(this.MyName); 
 }

 MyFunc2() 
  {
    this.MyName="other name"; 
    alert(this.MyName); 
 }

***** ******* home.html的

<input   type="text" [(ngModel)]="MyName"  >

<p>{{MyName}}</p>
<button ion-button (click)="MyFunc1()" >MyFunc1</button>
<button ion-button (click)="MyFunc2()" >MyFunc2</button>

。。

如果您在ts中更改MyName的值，那么它将在html中自动更改，如果您更改输入值（它绑定到MyName），它将更改模型中的MyName值（以ts为单位）。 / p>

选择离子中的DOM并不是改变模型值的正确方法。

Answer 3

以登录页面的简单示例

            <ion-item>
                <ion-label floating color="primary">Registered Email ID</ion-label>
                <ion-input [(ngModel)]="login.email" name="email" type="text" #email="ngModel" spellcheck="false" autocapitalize="off"
                    required>
                </ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating color="primary">Passcode</ion-label>
                <ion-input [(ngModel)]="login.passcode" name="password" type="password" #password="ngModel" required>
                </ion-input>
            </ion-item>

.ts代码为：

  login= { username: '', email:'', mobile:'', passcode:'' };

这就是字面意思！您也可以在没有登录对象的情况下进行操作，并且可以声明像

这样的变量

username: any
email: any

等等;并直接在html中引用它们

[(ngModel)]="username"

希望它有所帮助！

Answer 4

首先尝试理解当你在使用Ionic时，你正在开发Angular但不是Core Javascript。

这是一个可能有用的简单示例

<强> home.html的

import {Component} from '@angular/core';
import {NavController, AlertController} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
    name: string;

    constructor(public navCtrl: NavController, private alertController: AlertController) {
    }

    showName() {
        console.log(this.name);
        let alert = this.alertController.create({
            title: 'Hello ' + this.name + '!',
            buttons: ['OK']
        });
        alert.present();
    }
}

<强> home.ts

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-label>{{ name }}</ion-label>
    <ion-input [(ngModel)]="name"></ion-input>
    <button (click)="showName()">Click Me</button>
</ion-content>

将数据从home.html传递到home.ts

4 个答案: