Как переместить функции, которые работают при запуске из компонента в сервис - PullRequest
Новая
       43

Как переместить функции, которые работают при запуске из компонента в сервис

0 голосов
/ 15 апреля 2019

Я переписал этот вопрос, чтобы лучше узнать, как решить проблему. Все прекрасно работает, когда я сохраняю код в своем файле component.ts и отображаю его на html-странице, но когда я пытаюсь переместить его в службу, я получаю ошибки и не вижу динамического отображения.

component.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);
 }

}

partner.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».

Как мне конвертировать это, чтобы оно работало?

Ответы [ 3 ]

0 голосов
/ 15 апреля 2019

// код асинхронный // ПОЛУЧИТЬ ВСЕ СТРАНИЦЫ -> услуги, которые вы превратили в обещание 

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();
}

// в вашем компоненте listPages; 

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

}

0 голосов
/ 17 апреля 2019

OH! Я, наконец, сделал это!

Во-первых, мне нужно было добавить return перед http-запросом, чтобы он мог быть отправлен компоненту. 

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>

Теперь он наконец-то работает как сервис и без ошибок! Я открыт для ответов, которые можно считать правильным способом сделать это, если это не лучший способ.

0 голосов
/ 15 апреля 2019

Похоже, что getpages можно наблюдать, поэтому сначала нужно подписаться на них 

     this.pagesService.getPages().subscribe(data=>{
       console.log(this.pagesService.pages);
       });

надеюсь, это поможет

...