Angular 使数据可用于多个模块

现在我有一个应用程序，它的设置如下：

AppModule
    SubModule
        Multiple Components
    SecondSubModule
        Multiple Components

AppModule
    ParentModule
        SubModule
            Multiple Components
        SecondSubModule
            Multiple Components

我需要能够对REST API进行数据调用，该API同时被送入

子模块

和

第二个子模块

。我在考虑创建一个模块来包装它们并在那里进行数据调用，但我不知道如何在模块中进行数据调用，或者我是否应该这样做

如果我制作了一个组件，它需要将它作为一个空标记添加到标记中的某个地方，这充其量只是一种攻击

基本上，我希望将这些“打包”到另一个模块下，该模块进行必要的数据调用，并将其提供给其他两个模块，如下所示：

AppModule
    SubModule
        Multiple Components
    SecondSubModule
        Multiple Components

AppModule
    ParentModule
        SubModule
            Multiple Components
        SecondSubModule
            Multiple Components

这里的目标是使整个软件包可运输，并与

AppModule

完全分离，这样，只需添加相关文件并将其添加到

AppModule

即可将其添加到任何其他应用程序中

---

在Angular 2中，正确的方法是什么？

其他人遇到这个问题的答案是

这种思维方式非常有角度1，在这种情况下，您将向控制器提供数据，并通过继承将其向下传递

虽然通过使用

@Input

装饰器可以实现继承，但这里真正的解决方案是创建一个为您完成这项工作的数据服务

您需要的工具包括：

• 可注射头
• Http
• 可观察
• rxjs/可观察/of
• rxjs/可观察/共享
• rxjs/可观察/地图

在数据服务中，您将导入依赖项：

//应用程序导入
从“@angular/core”导入{Injectable}；
从“@angular/Http”导入{Headers，Http}”；
从“rxjs/Observable”导入{Observable}；
//RXJS导入
导入“rxjs/observable/of”；
导入“rxjs/add/operator/share”；
导入'rxjs/add/operator/map'；

然后你需要一个可注射的装饰器

@可注入

那你需要上课了

导出类数据服务{

接下来是构造函数

//构造函数
构造函数（私有http:http）{}

现在我们需要一些变量

//变量
私有数据：any=null；
私人可观察：可观察；
私有头=新头（{“内容类型”：“应用程序/json”}）；

从REST/JSON API检索数据后，

data

将保存我们的数据

observable

将保存我们的observable，外部调用将订阅的对象（这是神奇的部分）

头文件

只保存我们将用于发送http请求的头文件

现在我们需要定义函数来获取数据

//返回数据
getData（）{

现在将出现一个根据服务状态返回正确对象的算法

//如果我们已经有数据
如果（这个数据）{
//返回数据
（此数据）的可观测返回值；
}否则，如果（这是可观察的）{
//否则，如果我们有一个可观察的，返回它
返回此参数。可观察；
}否则{
//否则获取数据
this.observable=this.http.get（“/api/myApiClass”，{headers:this.headers}）
.map（响应=>{
//清除可见的
这个。可观察=空；
//如果呼叫失败
如果（response.status==400）{
//返回错误
返回错误
}否则如果（response.status==200）{
//否则设置数据
this.data=response.json（）.data；
//然后返回响应
返回此.data
}
})
.share（）；
//返回要订阅的可观察对象
返回此参数。可观察；
}

请注意结尾附近的

.share（）

，这是确保我们只进行一次HTTP调用的最后一个魔法

现在，我们需要在包含将使用此服务的组件的模块中提供此服务

首先，将数据服务导入到您的模块中

从“../../services/data.service”导入{DataService}”；

现在在提供者中声明它

providers:[数据服务]

现在，所有子组件都可以作为单例访问该服务

现在，在将调用此数据服务的组件中，您将导入服务，确保包括OnInit：

从'@angular/core'导入{Component，OnInit}；
从“./services/data.service”导入{DataService}；

并在构造函数中定义数据服务

构造函数（私有数据服务：数据服务）{}；

现在，最后，订阅数据服务中包含的observable：

ngOnInit（）{
this.dataService.getData（）.subscribe（数据=>{
这个数据=数据；
});
}

最后，您的文件应该如下所示：

AppModule
    SubModule
        Multiple Components
    SecondSubModule
        Multiple Components

AppModule
    ParentModule
        SubModule
            Multiple Components
        SecondSubModule
            Multiple Components

data.service.ts

//应用程序导入
从“@angular/core”导入{Injectable}；
从“@angular/Http”导入{Headers，Http}”；
从“rxjs/Observable”导入{Observable}；
//RXJS导入
导入“rxjs/observable/of”；
导入“rxjs/add/operator/share”；
导入'rxjs/add/operator/map'；
@可注射（）
导出类数据服务{
//建造师
构造函数（私有http:http）{}
//变数
私有数据：any=null；
私人可观察：可观察；
私有头=新头（{“内容类型”：“应用程序/json”}）；
//返回数据
getData（）{
//如果我们已经有数据
如果（这个数据）{
//返回数据
（此数据）的可观测返回值；
}否则，如果（这是可观察的）{
//否则，如果我们有一个可观察的，返回它
返回此参数。可观察；
}否则{
//否则获取数据
this.observable=this.http.get（“/api/myApiClass”，{headers:this.headers}）
.map（响应=>{
//清除可见的
这个。可观察=空；