如何将运行时有效的功能从组件移动到服务答案

【问题标题】：How to move functions that work when run from a component to a service如何将运行时有效的功能从组件移动到服务
【发布时间】：2019-09-05 01:53:27
【问题描述】：

我重新编写了这个问题，以便更好地获得有关如何解决问题的帮助。当我将代码保存在我的 component.ts 文件中并将其显示在 html 页面上时，一切都很好，但是当我尝试将其移动到服务时，我得到错误并且没有动态显示。

组件.ts

import { PagesService } from './../services/pages.service';
import { Page } from './../admin/pages/page.model';
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SERVER_URL } from '../../../src/environments/environment';


@Component({
  selector: 'app-partner',
  templateUrl: './partner.page.html',
  styleUrls: ['./partner.page.scss'],
})
export class PartnerPage implements OnInit {
  public pageList: Array<Page> = Array<Page>();
  fileName: string = "partner";
  page: Page;
  constructor(private pgsService: PagesService, private http: HttpClient) {}

  GetPages() {
    this.http.get(`${SERVER_URL}api/pages`)
    .subscribe(res=>this.Success(res),res=>this.Error(res));
  }
  GetPage(fileName: string) {
      this.http.get(`${SERVER_URL}api/pageName/${fileName}`)
    .subscribe(res=>this.SuccessPage(res), res=>this.Error(res));
  }
  ngOnInit() {
    this.GetPages();
    this.GetPage(this.fileName);

  }
  Error(res) {
    console.log(res);
  }
 Success(res) {
   console.log(res);
   this.pageList = res;
   console.log("this.pageList",this.pageList);
 }
 SuccessPage(res) {
   this.page = res;
   console.log("this.page",this.page);
 }

}

合作伙伴.html

<ion-header>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-header>
<ion-content padding>
  <ion-title>{{page?.title}}</ion-title>
  <div class="partner-wrap">
    <ion-text>
      <h1 class="partner-header">{{page?.heading}}</h1>
      <img src="../../assets/partnerupogo.png" alt="PartnerUp!">
        <div [innerHtml]='page?.content'></div>
    </ion-text>
  </div>
  <div>{{page?.footer}}</div>
</ion-content>

我建议的 pages.service.ts

import { PagesService } from './../services/pages.service';
import { Page } from './../admin/pages/page.model';
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SERVER_URL } from '../../../src/environments/environment';


@Component({
  selector: 'app-partner',
  templateUrl: './partner.page.html',
  styleUrls: ['./partner.page.scss'],
})
export class PartnerPage implements OnInit {

  public page: Page;
  fileName: string = "partner";
  constructor(public pgsService: PagesService, public http: HttpClient) {}

  ngOnInit() {
    this.pgsService.GetPage(this.fileName)
    .subscribe(res=>this.pgsService.SuccessPage(res),res=>this.pgsService.Error(res));
    this.page = this.pgsService.page;

  }

}

我尝试将函数复制到服务中，并通过服务运行，但没有成功。这些函数将通过服务运行和 console.log，但我无法将数据传递给组件以在 html 中显示。

我在 src/app/partner/partner.page.ts(21,6) 中得到 错误：错误 TS2339：“void”类型上不存在属性“订阅”。

如何转换它以使其正常工作？

【问题讨论】：

如果可能的话提供stackblitz
你必须了解地球上asynchronous 的东西，并且可能从服务方法中返回一些东西给组件。
我尝试将文件上传到 stackblitz，但之前从未使用过。 stackblitz.com/edit/angular-4dd5ch
@SachinGupta 我同意，这就是我寻求帮助的部分原因。我一直在努力学习它，但似乎无法做到这一点。
好的。我通过返回我的 GetPage() 方法来显示页面，但我收到大量类型错误：PartnerPage.html:12 错误类型错误：无法读取 Object.eval 处未定义的属性“服务”[as updateRenderer]

标签： angular angular-services angular-httpclient

【解决方案1】：

// 代码是异步的 //GET ALL THE PAGES -> 服务你变成了一个承诺

getPages() {
    return this.http
      .get<Page[]>(`${SERVER_URL}api/pages`)
      .pipe(
       map(pages => {
      //for each record in the results
          for (let page of pages) {
        //return an empty array if no links
            if (!page["links"]) {
              page["links"] = [];
          }
        }
        return pages;
      })
    )
  .toPromise();
}

//在你的组件列表页面中；

ngOnInit() {
    this.getPages();
  }
async getPages() {
    try {
      this.listPages = await this.pagesService.getPages();
      console.log(this.listPages);
   } catch (error) {}

}

【讨论】：

我试过这个，但是当我尝试从我的组件中控制台记录任何东西时仍然不确定。不过，服务正在记录正确的结果。

【解决方案2】：

哦！我终于做到了！

首先，我需要在http请求之前添加return，这样才能发送给组件。

GetPage(fileName: string) {
    return this.http.get(`${SERVER_URL}api/pageName/${fileName}`);
  }

然后我需要使用 ?使用字符串插值时，我没有在显示页面时遇到大量错误。我在 html 中也有一个错字。

<ion-header>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-header>
<ion-content padding>
  <ion-title>{{pgsService?.page?.title}}</ion-title>
  <div class="partner-wrap">
    <ion-text>
      <h1 class="partner-header">{{pgsService?.page?.heading}}</h1>
      <img src="../../assets/partnerupogo.png" alt="PartnerUp!">
        <div [innerHtml]='pgsService.page?.content'></div>
    </ion-text>
  </div>
  <div>{{pgsService?.page?.footer}}</div>
</ion-content>

现在它终于可以作为服务运行了，而且没有错误！如果这不是最好的方法，我愿意接受可能被认为是正确方法的答案。

【讨论】：