Angular 2 / Ionic 2 ngModel Динамическая глобальная переменная

Question

Angular 2 / Ionic 2 ngModel Динамическая глобальная переменная

0

Привет всем, кого я сейчас пытаюсь использовать в своей переменной ngModeled глобально.

До сих пор у меня есть следующий фрагмент кода.

homepage.html

<ion-input type="text" value="" [(ngModel)]="databaseID">

homepage.ts

public databaseID;

Эти функции работают, и когда я пытаюсь распечатать ngModeled данные из класса home.ts, он печатает то, что было введено пользователем. Однако я не уверен, как вызвать databaseID из другого класса. Я попытался установить databaseID на глобальный (глобальные переменные являются статическими, и поэтому это не сработает).

Не могли бы вы объяснить, как я могу получить доступ к этой переменной из другого класса?

Некоторые возможные мысли, которые у меня были, - это инъекция зависимости и использование провайдеров. Но я не уверен, что было бы лучшим способом сделать это.

Jlee 21 июль 2016, в 16:43

Источник

Теги:

angular

javascript

ionic-framework

angularjs

ionic2

2 ответа

1

Я не уверен, как вызвать databaseID из другого класса

Нужно ли другим классам выполнять некоторую логику при изменении идентификатора databaseID? Если это так, используйте Служащий или Субъект в службе. Другие классы будут subscribe() на Observable, чтобы получать уведомления об изменениях. Для примера см. Https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service. (Несмотря на то, что это пример использования службы для связи между родителем и дочерним элементом, тот же метод применяется для связи между любыми двумя компонентами.)

Если вам не нужно выполнять какую-либо логику, тогда ответ, предоставленный @Brandyn, хорош. Однако я бы не использовал прямое имя свойства службы в представлении/шаблоне компонента. Вместо этого я бы использовал свойство компонента или "get" accessor:

@Component({
   template: '<ion-input type="text" [(ngModel)]="database.id">'
})
export class HomePageComponent {
    constructor(private _dbService: DatabaseService) { }
    get database() { return this._dbService.database; }
}

export class DatabaseService {
    database: { id: 0 }; 
}

Возможно, вы захотите определить интерфейс для типа базы данных, если он имеет ряд свойств:

export interface Database {
    id: number;
    // other properties here
}

затем

get database(): Database { return this._dbService.database; }

Mark Rajcok 21 июль 2016, в 13:51

Ещё вопросы

Brandyn Bayes · Accepted Answer · 2016-07-21T12-32-00.000Z

Лучшим способом обмена переменной между различными компонентами/директивами является использование службы. Что вы можете сделать, так это привязать ngModel непосредственно к службе, а затем обратиться к службе из нескольких компонентов.

Обслуживание:

@Injectable()
export class MyService {
    databaseId: string;

    constructor() {
        this.databaseId = "1234";
    }
}

Компонент:

export class MyComponent {
    constructor(private myService: MyService) { }
}

HTML:

<ion-input type="text" value="" [(ngModel)]="myService.databaseID">

Учебное пособие по службам: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Инъекция зависимостей: https://angular.io/docs/ts/latest/cookbook/dependency-injection.html