角2 /イオン2 ngModel動的グローバル変数

Question

皆私は現在、グローバルにngModeled変数を使用しようとしています。

これまでのところ、私は次のコードスニペットを持っています。

homepage.html

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

homepage.ts

public databaseID; 

これらの機能が動作し、私はhome.tsクラスからngModeledデータを印刷しようとすると、それはによって入力されたものを印刷しますユーザー。しかし、別のクラスから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"> 

サービスチュートリアル：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

依存性注入：https://angular.io/docs/ts/latest/cookbook/dependency-injection.html

Answer 2

私は別のクラス

からdatabaseIDを呼び出す方法を確認していない他のクラスは、いくつかのロジックときdatabaseID変更を実行する必要がありますか？そうであれば、ObservableまたはSubjectをサービス内で使用してください。他のクラスはObservableにsubscribe()に変更が通知されます。例については、https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-serviceを参照してください。 （たとえそれが親と子の間の通信にサービスを使用する例であっても、同じ2つのコンポーネント間の通信に同じテクニックが適用されます）。

ロジックを実行する必要がない場合、 @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; }