Question

我正在尝试从服务访问数据，但是只有在我调用服务函数中的组件函数之一时才能访问它。我能做些什么吗？

我尝试在可观察的内部使用回调，但这无法正常工作。在服务内部导入组件然后调用函数是一个好习惯吗？

service.ts:
 serviceFunc1(){
   //I will get some data from here after subscribing
   this.serviceFunc2();
   CompoFunc1(); // Not able to do
   //Calling CompoFunc1() to get items variable(please read entire you'll get it)
}
  serviceFunc2(){
    //I will use the data that came from serviceFunc1() inside api(loop)
    //After subscribing the data I will get some data, that data I will be storing in some variable(assume variable is items)
  }

Component.ts:
  CompoFunc1(){
     //Now I need to acces the variable items inside this component
     //So this.service.items;
     //But to get items I need to call CompoFunc1() inside serviceFunc1 after serviceFunc2()  
 }
 ngOnInit(){
  this.service.serviceFunc1();
}

如有任何疑问，请随时提问。

我只想访问组件内部的项目变量。

Answer 1

您的服务通常不调用您的组件。如果它需要来自组件的数据，请在this.service.serviceFunc1(myData)调用中将该数据从组件传递给服务。

如果需要在服务调用后在组件中执行某些操作，请在服务调用后的之后添加代码。

服务

在此处致电http.get，但不要订阅

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl)
  }

组件

在此处调用服务，订阅并执行其他所需的操作。

  ngOnInit(): void {
    this.sub = this.productService.getProducts().subscribe(
      products => {
        this.products = products;
        // Do whatever else needs to be done in the component after receiving the data
      }
    );
  }

这是您要做什么吗？

Answer 2

您不需要从组件中订阅任何内容。

在服务中，设置一个函数以从组件中获取数据。

public getData(args: any){
    this.data = args;
}

在您的组件中，将数据发送到服务，如下所示：

this.service.getData(myDataFromComponent);

该服务现在将myDataFromComponent数据集存储为this.data。

您提到使用API，所以我假设返回了一个observable。

serviceFunc1(args: any) {
    //This is where you work your magic with the data
}

serviceFunc2(args: any) {
    //Code to process the secondary data here:
}

在继续执行代码之前，请确保嵌套函数，以便返回该函数：

serviceFunc3() {
    this.serviceFunc1.pipe(
      switchMap( results => {
        this.finalAnswer = this.serviceFunc2(results);
        //Additional processing/handling of data;
      })
    );
}

将功能从组件传递到服务

2 个答案: