각도 2/이온 2 ngModel 동적 전역 변수

Question

안녕하세요, 저는 현재 ngModeled 변수를 전역 적으로 사용하려고합니다.

지금까지 다음 코드 스 니펫이 있습니다.

homepage.html

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

homepage.ts

public databaseID; 

이 기능이 작동

하고 나는 그것이가 입력 된 내용을 인쇄하고 home.ts 클래스의 ngModeled 데이터를 인쇄 할 때 사용자. 그러나 다른 클래스에서 databaseID를 호출하는 방법을 잘 모르겠습니다. global (전역 정적 및 이에 대한 작동하지 않습니다) 전역 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

의존성 삽입 (Dependency Injection) : 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을 참조하십시오. 부모와 자식 간의 통신을 위해 서비스를 사용하는 경우에도 동일한 기술이 두 구성 요소 간의 통신에 적용됩니다.

논리를 실행할 필요가없는 경우 제공되는 대답 @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; }