草庐IT

javascript - 绑定(bind)到 Angular 2 服务中的数据对象的正确方法？

coder 2024-07-22 原文

我正在构建一个 Angular 2 应用程序。自发布以来，文档发生了很大变化，这引起了困惑。我能做的最好的事情就是解释我想做什么(这在 Angular 1 中很容易)并希望有人能帮助我。

我已经使用 JWT 创建了一个登录服务。 登录成功后，我将返回一个用户对象。

我有一个 loginComponent(将数据绑定(bind)到模板)和 loginService(处理 https 调用)

我有一个维护用户对象的 userService。

我有一个呈现用户数据的 userComponent。

问题是，一旦用户登录，我不清楚让 userService 在名为“user”的对象中检索新数据的最佳方法，然后 userComponent 在模板上更新其用户对象。这在 Angular 1 中很容易，只需在 userService.user 对象上放置一个观察者即可。

我尝试了 Inputs 和 Outputs，eventEmitters，Observables 和 getters and setters 都没有用。 getter 和 setter 工作，但迫使我将所有内容存储在“val()”中

有人可以告诉我实现此目标的最佳方法吗？

  1. 用户组件使用 user.firstName、user.lastName 等呈现模板。
  2. 如果是空对象则初始用户
  3. 登录服务需要设置UserService.user
  4. userComponent 需要检测变化并更新 DOM。

提前致谢!

最佳答案

如果我没记错的话，您正在寻找一种方法来“聆听”您的 UserService.user 中的变化。在您的 UserComponent 中进行适当的更新.使用 Subject 很容易做到这一点(或 BehaviorSubject )。

-在你的UserService , 声明属性 user与类型 Subject<User> .

user: Subject<User> = new Subject();

-将其暴露给外部作为可观察的:

user$: Observable<User>
...
this.user$ = this.user.asObservable();

-登录函数将更新私有(private)user主题。

login(userName: string, password: string) {
  //...
  this.user.next(new User("First name", "Last name"));
}

-在你的UserComponent , 订阅 UserServive的 user$ observable更新 View 。

this.userService.user$.subscribe((userData) => {this.user = userData;});

-在您看来，只需使用字符串插值即可:

{{user?.firstName}} {{user?.lastName}}

这是工作中的 plunker:http://plnkr.co/edit/qUR0spZL9hgZkBe8PHw4?p=preview

关于javascript - 绑定(bind)到 Angular 2 服务中的数据对象的正确方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38928582/

javascriptAngularcodeusersectionangularjs

有关javascript - 绑定(bind)到 Angular 2 服务中的数据对象的正确方法？的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  3. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  4. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  5. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  6. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  7. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

  8. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  9. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  10. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

随机推荐