Передать данные из home.html в home.ts

Question

Я новичок в ionic, и я хотел бы знать, как я могу передать данные, которые находятся между тегом

html, в мой файл home.ts.Я попытался сделать getElementById, но это не похоже на работу.Также ViewChild, но с нулевым результатом.Я хотел бы получить помощь по этому вопросу.

Answer 1

Сначала попытайтесь понять, что когда вы работаете с 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>

Answer 2

Из .ts -> html:

.ts-> varString : String = "Hallo world"; html-> {{varString}}

От html -> .ts зависит от тега html

Ex.<input type=“text” name=“username” [(ngModel)]=“username”> имя пользователя - username : String = "";, и оно изменяется во время обновления ввода.Подобно другим тегам HTML.Вы также можете получить элементы по идентификатору или классу, используя Element ионного угла

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

Существует много способов передачи данных между html и ts, но вы должны хорошо понимать шаблон проектирования MVC.MVC является причиной того, почему Google ввел angular.

в angular (движок ionic), ваш 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>

.,.

если вы измените значение MyName в ts, оно автоматически изменится в html, а также если вы измените введенное вами значение (привязанное к MyName), оно изменит значение MyName в модели (вts).

Выбор DOM в ионном режиме - неправильный способ изменить значение модели.