Angular2:组件和服务之间的范围?

时间:2016-11-30 14:10:09

标签: variables angular typescript scope angular2-services

我正在开发一个大型Angular2应用程序。该应用程序包含许多具有类似行为的组件。遵循DRY原则,我在共享服务中包含了所有通用组件功能。

但是,对于大多数组件(例如foo.component.ts),我有一个相应的“个人”服务,它获取特定组件的数据(例如foo.service.ts)。总结所有组件使用2个服务,它们是自己独特的服务和共享服务。 “个人”服务的代码如下所示:

export class MasterDataService {
  getData(param) {
    return this._http.get("some/url/"+param+"/)
      .map((res) => {
        return res.json();
      })
  }
}

目前,我的组件使用共享服务来获取数据。我现在这样做的方法是调用共享服务中的一个函数,并将“个人”服务作为该函数的参数发送:

public initializeController(dataService, component:any) {
    this._activatedRoute.params.subscribe(
      (param: any) => {
        this._param = param;

        dataService.getData(param).subscribe(
          data => this._httpSuccess(data, component),
          err => this._httpError(err)
        );

      }
    );
  }

在同一个函数中,我还将我的组件作为参数发送:

// In component
   this._controller.initializeController(this);

原因是我的组件中有一个包含HTML数据的dataModel。通用共享服务负责调用个人服务,并更新组件中的dataModel。

setLocalData(data) {
    console.log("Callback fired!!");
    this.masterdataModel = data;
    this.loading = false;
  }

this.dataModel = {
      data_1: "foo",
      data_2: "bar",
    };

我找到了一个解决方案,当我通过共享服务在我的组件中设置我的模型数据时,通过将“this”作为参数从我的组件发送到我的服务函数:

// In component
this._controller.initializeController(this);

// In service
public initializeController(component:any) {

    component.dataModel = {/* some new data */}
}

我将个人服务和组件作为参数发送,因为我无法以任何其他方式从共享服务访问回调函数或个人服务。

问题1:如何构建可以从每个组件具有的“个人”服务调用函数的通用服务或函数?我是以正确的方式做到还是有更好的方法?

问题2:我的组件如何调用服务功能或设置组件回调或从我的服务访问组件中的变量?

问题3:我觉得这很困难的原因是因为我使用的是“=>”在我的共享服务中切换“this”的上下文,这就是我最终将我的组件作为参数发送的原因。有什么解决方案吗?

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:2)

您可以在组件上提供“个性化服务”,然后每个组件实例都会获得自己的服务实例(不确定这是否是您想要的)

@Component({
  selector: 'my-component',
  providers: [MyComponentPersonalService]
  ...
})
class MyComponent {
  constructor(private personalService:MyComponentPersonalService) {}

问题1:我建议您在共享服务中创建一个返回Observable的方法,并且个人服务订阅该observable并执行共享服务发出值时所需的内容

问题2:与问题1相同

问题3:以这种方式传递引用非常奇怪,应该完全避免

有关具有可观察性的示例,请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service