Question

大家好我当前正在尝试全局使用我的ngModeled变量。

到目前为止，我有以下代码段。

homepage.html

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

homepage.ts

public databaseID;

这些功能起作用，当我尝试从home.ts类打印ngModeled数据时，它会打印用户输入的内容。但是我不确定如何从另一个类调用databaseID。我已经尝试将databaseID设置为global（全局变量是静态的，因此这不起作用）。

您是否可以解释一下我可以从另一个类访问此变量的方法？

我有一些可能的想法是依赖注入和使用提供者。但我不确定最好的方法是什么。

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。其他类将{Ob}的subscribe()通知变更。有关示例，请参阅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; }

Angular 2 / Ionic 2 ngModel动态全局变量

2 个答案: