Question

我是新来的，从Angular 7开始一些代码，我遇到了问题。
我创建了两个组件和一个服务。当在组件searchbar中单击按钮时，服务将检索数据。我想在search-res视图中显示它。该服务具有要从searchbar组件中获取的数据

这是服务代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http:HttpClient) { }



  getData( input:string ):Observable<any>
  {
   return this.http.get<any>('https://newsapi.org/v2/everything?q='+input+'&apiKey=b9d34afdf37948cda401c3dc0afe1189')
  }

}

我不确定如何在以下组件中执行此操作：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-searchbar',
  templateUrl: './searchbar.component.html',
  styleUrls: ['./searchbar.component.css']
})
export class SearchbarComponent implements OnInit {
  public inData : string ;  

  constructor(private data : DataService) { }

  ngOnInit() {
  }

}

搜索结果组件

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-search-res',
  templateUrl: './search-res.component.html',
  styleUrls: ['./search-res.component.css']
})
export class SearchResComponent implements OnInit {

  constructor(private data: DataService) { }

  ngOnInit() {
  }

}

请帮助！

Answer 1

欢迎来到stackoverflow！

与大多数代码编写一样，您有几种选择。尚不清楚您定义的两个组件（SearchbarComponent和SearchResComponent）如何关联。

同时订阅这两个组件

这是将数据放入两个组件的最简单方法，并且不需要它们之间的任何关系。但是它确实然后获得了两次数据。因此，这可能是“入门”并构建有效原型的不错选择，但可能不适用于生产解决方案。

订阅一个组件，然后将数据传递给另一个组件

这个选项也很简单，但是取决于组件之间的关系。

如果一个组件是另一个组件的子组件...也就是说，它位于另一个组件上，如下所示：

组件1的html

<component2's selector></component2's selector>

然后，您可以使用Input属性将数据传递到子组件。

建立数据缓存

您可以一次获取数据并将其缓存在服务中。此选项分为多个其他选项。

您可以在DataService中定义一个简单的属性，您可以将数据检索到其中，然后在此处管理缓存。

或者您可以定义一个HttpInterceptor并在那里管理您的缓存。

此方法的缺点是您必须随后管理缓存。如果用户添加或删除任何项目，则需要使缓存无效。一段时间之后，其他用户可能已经更改了数据，因此缓存应该无效。

使用状态管理库

您可以使用状态管理库（例如NgRx）。它处理缓存数据并将其提供给需要它的任何组件。对于生产质量的应用程序来说，这是一个很好的解决方案……但是对于新的Angular开发人员来说，这有点吓人，因为它利用了RxJS等复杂功能。

每个主题都是一个大话题……让我知道您是否特别对某个选择感兴趣，我可以提供一些指向更多信息的指针。

同步在两个组件之间交换数据和事件

1 个答案: