简体   繁体   English

angular2流星项目中两个组件之间的传递值

[英]Passing value between two components in angular2-meteor project

I am using angular2-meteor. 我正在使用angular2-meteor。

When I try to pass a value between two components (when the value change in the first component, create an event in second component and use this new value), I have two ways right now: 当我尝试在两个组件之间传递值时(当第一个组件中的值更改时,在第二个组件中创建一个事件并使用此新值),我现在有两种方法:

  1. One way is meteor way: using this.autorun and Session.get . 一种方法是流星方法:使用this.autorunSession.get
  2. Another way is angular2 way: using Injectable service with EventEmitter . 另一种方式是angular2方式:将Injectable服务与EventEmitter一起EventEmitter

Which way should be prior? 哪种方式应该优先? Or is there any other better way? 还是还有其他更好的方法? Thanks 谢谢

Now I used angular2-meteor a while. 现在我使用了angular2流星。

Although the angular2-meteor tutorial has no example so far about using or choosing Angular 2 service or Meteor Session . 尽管angular2-meteor教程到目前为止还没有使用或选择Angular 2服务Meteor Session的示例。

But I feel angular 2 takes the lead in the front end, while meteor makes reactivity easier and also handle all back end things. 但是我感觉到Angular 2在前端处于领先地位,而流星使反应性变得更容易并且还处理了所有后端事务。

So I went with angular2 way using service to share between components. 因此,我使用angular2方式使用服务在组件之间共享。 And service is very powerful like @todd-w-crone said. 服务非常强大,就像@ todd-w-crone所说。

If anyone has better answer, I will switch to accept that one. 如果有更好的答案,我将转而接受该答案。

I find it practical to create a new service called App.states.ts which is accessed globally and mimics Session (get / set). 我发现创建一个名为App.states.ts的新服务非常实用,该服务可全局访问并模仿Session(获取/设置)。 I commonly import this service to all necessary components to get or set new value such as User.status, company.profile, lastProduct , etc. 我通常将此服务导入所有必要的组件,以获取或设置新值,例如User.status,company.profile,lastProduct等。

Since this service is @injectable it can also make use of other services, in case a value hasn't been set already. 由于此服务是@injectable因此如果尚未设置值,它也可以利用其他服务。 This allows me to ask for a variable in a component appState.getLastModifiedItem() , then in app.states.ts I'll write this function to pass this.modifiedItem or either: 这允许我在组件appState.getLastModifiedItem()请求一个变量,然后在app.states.ts我将编写此函数以传递this.modifiedItem或:

  • Request another service item.service.ts to fetch data 请求另一个服务item.service.ts来获取数据
  • Call another function with itemCollection.findOne({...}) and return such value. 使用itemCollection.findOne({...})调用另一个函数并返回该值。

You can configure Mongo queries as you want and either store static data in appState or keep subscription items in appState. 您可以根据需要配置Mongo查询,或者将静态数据存储在appState或者将订阅项目保留在appState中。

Do take into consideration that all subscriptions handled by an @injectable within a component are imported by such component. 请考虑到组件中由@injectable处理的所有订阅都是由此类组件导入的。 Be wary of conflicting subscriptions between components/services. 注意组件/服务之间的预订冲突。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM