Question

我想知道什么是访问组件中数据的正确方法。我已经读过几次了，应该让角度模板处理订阅，但是如何在component.ts文件中访问某些方法的当前值？

假设我具有以下组件：

@Component({...})
class TestComponent {

  testData: Observable<TestData>

  ngOnInit(){
    this.testData = this.service.getData().pipe(share())
  }
}

它有一个sendDataABCProperty，它将我们的testData的属性ABC发送到某个任意服务。

  sendDataABCProperty() {
    this.testData.pipe(first()).subscribe(data => this.service.sendData(data.abc))
  }

现在，当使用上述方法时，我仍然必须订阅我的数据，而这正是我试图阻止的。

另一种方法是复制数据而不使用流，但是由于我试图使其更具反应性，所以我想避免这种方式。

另一个示例是某种“显示和编辑”组件。假设我从某项服务中获取了我的显示数据，随后我也访问了该服务以更新数据。但是我需要它的（数据的）ID。访问ID的最佳方法是什么？在一开始复制它（使用tap() / subscribe()）？使用BehaviorSubject？还是完全不同的东西？

Answer 1

您的帖子中有几个问题，我将介绍有关获取ID的部分。

我有一个显示产品列表的列表组件。用户单击产品以显示/编辑它。我用<!DOCTYPE html> <html lang="en"> <head> <title>HOME</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet"> <link rel="stylesheet" href="assets/css/style.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <nav class="navbar"> <button class="navbar-toggler"><span></span></button> <a href="index.html" class="navbar-brand"><img src="images/templogo.png" style="width: 100px; height: 90px; vertical-align: middle"></a> <div class="navbar-menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <div class="navbar-social"> <ul> <li><a href="#"><i class ="fa fa-twitch"></i></a></li> <li><a href="#"><i class ="fa fa-soundcloud"></i></a></li> <li><a href="#"><i class ="fa fa-twitter"></i></a></li> <li><a href="#"><i class ="fa fa-youtube"></i></a></li> </ul> </div> </nav> <div class="hero"><img src="images/promo1080p.png"></div> <div class="footer"> <div class="container"> <form action=""> <div class="email-box"> <i class="fa fa-envelope" aria-hidden="true"></i> <input class="tbox" type="email" name="" value="" placeholder="Enter your email"> <button class="btn" type="button" name="button">Subscribe</button> </div> </form> </div> </div> <script src="assets/js/script.js"></script> </body> </html>

处理

在服务中

Subject/BehaviorSubject

在组件中（当用户单击产品时）

  private productSelectedSubject = new BehaviorSubject<number>(0);
  productSelectedAction$ = this.productSelectedSubject.asObservable();

在服务中

然后我在服务中具有一个流属性，每次发出不同的选定产品时，该流的管道都会自动重新执行：

  onSelected(productId: number): void {
    this.productService.selectedProductChanged(productId);
  }

这能回答您问题的那一部分吗？

我在这里有示例代码：https://github.com/DeborahK/Angular-RxJS

此视频也可能有用：https://www.youtube.com/watch?v=Z76QlSpYcck

Answer 2

您不能访问服务数据，直到您对其进行订阅。但是，您可以使用管道修改数据。但是请注意，只有在您订阅可观察对象时，修改才会发生。
我不知道这是你想要的还是不想要的。您还可以使用 resolver 来在组件加载之前获取数据并使用快照检索数据。这样，您就不必在组件中订阅可观察对象。

请阅读本文以获取更多详细信息，https://alligator.io/angular/route-resolvers/

Angular：如何正确访问组件中的数据

2 个答案: