使用 Ionic Angular 如何将值从服务传递到页面答案

【问题标题】：Using Ionic Angular how to pass value from a service to a page使用 Ionic Angular 如何将值从服务传递到页面
【发布时间】：2021-01-22 06:29:26
【问题描述】：

我正在尝试使用服务从服务器检索数据，我需要将值从我的服务传递到我的页面。我不确定这是否是满足我要求的合适方法。请帮忙！

cart.service.ts

export class CartService {

public jProducts="";

constructor(private http:HttpClient) { }
getMyProducts(){
const getValues = "http://website.com/temp.xq";

    this.http.get<any>(getValues, {responseType: 'text' as 'json'})
    .subscribe(
      (res:any) =>  console.log(this.jProducts = (res))      
      );
    return this.jProducts
    }
}

mypage.ts

import { CartService } from 'src/app/services/cart.service';
    loadValues: any= [];
    
    ngOnInit() {
        this.loadValues = this.cartService.jrnProducts;
    }

【问题讨论】：

jrnProducts 是什么？删除 return 关键字只需添加 this.http.get<any>(getValues, {responseType: 'text' as 'json'}) .subscribe( (res:any) => this.jProducts = res; );
哎呀，它是来自服务的 jProducts。让我试试你的解决方案

标签： angular ionic-framework httpclient

【解决方案1】：

不要忘记在 @NgModule 中导入 HttpClientModule。

购物车服务

export class CartService {
    
    constructor(private http:HttpClient) { }
        getProducts(): Observable<[]> { 
            const url = http://website.com/temp.xq;
    
            return this.http.get<any>(url); 
        };
    }
}

国家搜索组件

import { CartService } from 'src/app/services/cart.service';

export class CountrySearchComponent implements OnInit, OnDestroy {
    private destroy$ = new Subject();
    products: [] = [];

    constructor(private readonly cartService: CartService) {}
    
    ngOnInit() {
        this.cartService.getProducts().pipe(
            takeUntil(this.destroy$),
            tap(products: []) => this.products = products
        ).subscribe();
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }    
}

【讨论】：

【解决方案2】：

在您的“mypage.ts”页面中有一个ngOnInit() 函数。使用此功能，您正在尝试从服务加载数据。但我认为问题在于，您必须从ngOnInit() 调用服务内部的方法。所以，代码应该看起来像你的ngOnInit() 应该是this.loadValues = this.cartService.getProducts();。
这是一个在 Stackblitz 上给出的示例类似代码链接：Link
请检查链接中的代码并让人们知道

【讨论】：

【解决方案3】：

我的一个简单示例如下所示 =>

电影服务

async attachMovie(id: string, params: Partial<IUserMovie>) {
   return this.http
     .post<IMovie>(`${this.apiUrl}/user/movies/${id}`, params, this.httpOptions)
     .pipe(
       catchError(this.handleError('Attach move to client'))
     )
     .toPromise();
 }

电影页面

public movies: IMovie[] = [];

constructor(
  private movieService: MovieService,
) { }

async ngOnInit() {
  this.movies = await this.movieService
      .updateMovie(
         this.movie._id,
         {
           offset: video.currentTime,
           isWatched: video.ended
         }
   )
}

或者，如果您需要，您可以使用 subscription 代替 Promise

希望对你有帮助！快乐并拥有一个干净的代码:)

【讨论】：