Блог

Я использую Angular 7 (и однажды мне придется обновить свою версию). У меня есть сервис, в котором есть некоторые переменные, которые могут изменяться в соответствии с некоторыми Promise (http GET , PUT , … ответ).

Я хочу напечатать эти переменные в шаблоне.

Могу ли я это сделать:

app.component.html:

 <ng-container *ngIf="this.dogService.isWarningProblem">
    <ngb-alert [dismissible]="false" type="warning" style="text-align: center">
        {{this.dogService.errorMessage}}
    </ngb-alert>
</ng-container>
  

app.service.ts:

 export class DraftService {

    public errorMessage: string;
    public isWarningProblem: boolean;

    constructor
        (
            private generalErrorService: GeneralErrorService,
            private http: HttpClient
        ) {
            [...]
        }

    public launchPingEditReadDraftByActionOfferIdUrl(action: string, offerIdUrl: string): Subscription {
        return interval(10).subscribe(
            () => {
                //Get variables from the server and set them.
            },
            () => {}
        );
    }

}
  

Я хочу использовать сервис, потому что алгоритм равен другим компонентам, но они не могут видеть переменные других компонентов. Итак, я не могу использовать подписку с объектом поведения и наблюдаемым:

Есть ли какие-либо лучшие решения?

Нет, это не best practice для отображения результата службы непосредственно в шаблоне. Лучше внедрить ваш service как dependency (внедрение зависимостей) в ваш компонент, который устанавливает некоторые variables с результатом обслуживания и отображает их в вашем шаблоне. Итак, попробуйте что-то вроде этого:

app.service.ts

 import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

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

    private errorMessage$ = new Subject<string>();
    private isWarningProblem$ = new Subject<boolean>();

    
    constructor (
      private generalErrorService: GeneralErrorService,
      private http: HttpClient
    ) {
       this.launchPingEditReadDraftByActionOfferIdUrl();
    }

    sendErrorMessage(message: string) {
        this.errorMessage$.next({ text: message });
    }

    clearErrorMessages() {
        this.errorMessage$.next();
    }

    onErrorMessage(): Observable<any> {
        return this.errorMessage$.asObservable();
    }

    public launchPingEditReadDraftByActionOfferIdUrl (action: string, offerIdUrl: string): Subscription {
      interval(10).subscribe(
        (res) => {
          this.sendErrorMessage(res.errorMessage);
          // The other like this
        });
    }
}
  

app.component.ts

 import { Component } from '@angular/core';
import { DraftService } from './draft-service';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.css'],
})
export class TemplateComponent {

  public errorMessage: string;
  public isWarningProblem: boolean;

  constructor(
    private _draftService: DraftService,
  ) { }
   
  ngOnInit() {
    this._draftService.onErrorMessage().subscribe(
      res => {
        this.errorMessage = res
        //The other like this
      }
    );
  }
}
  

app.component.html

 <ng-container *ngIf="isWarningProblem">
  <ngb-alert [dismissible]="false" type = "warning" style="text-align: center">
    {{errorMessage}}
  </ngb-alert>
</ng-container>