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

Question

Привет всем Я в настоящее время пытаюсь использовать переменную ngModeled во всем мире.

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

homepage.html

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

homepage.ts

public databaseID; 

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

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

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

Answer 1

Лучший способ обмена переменной между различными компонентами/директивами - использовать сервис. Что вы можете сделать, так это привязать 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"> 

Services Tutorial: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Dependency Injection: https://angular.io/docs/ts/latest/cookbook/dependency-injection.html

Answer 2

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

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

Если вам не нужно выполнять какую-либо логику, by @Brandyn - это хорошо. Однако я бы не использовал прямое имя свойства службы в представлении/шаблоне компонента.Вместо этого, я хотел бы использовать свойство компонента или «получить» 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; }