Dịch vụ chèn góc trong tệp.html

Question

Tôi đang sử dụng Angular 7 (và một ngày nào đó tôi phải nâng cấp phiên bản của mình). Tôi có một dịch vụ mà có một số biến có thể thay đổi theo một số Promise(http GET, PUT... đáp ứng).

Tôi muốn in các biến này trên một mẫu.

Tôi có thể làm điều này:

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.
            },
            () => {}
        );
    }

}

Tôi muốn sử dụng dịch vụ vì thuật toán tương đương với các thành phần khác nhưng chúng không thể nhìn thấy các biến của các thành phần khác. Vì vậy, tôi không thể sử dụng đăng ký với Chủ đề hành vi và Có thể quan sát được:

Có giải pháp nào tốt hơn không?

Answer 1

Không, nó không phải là best practicehiển thị kết quả dịch vụ trực tiếp vào mẫu. Tốt hơn là bạn nên tiêm servicedưới dạng dependency (Dependency Injection) vào thành phần của bạn để thiết lập một số variablesvới kết quả dịch vụ và hiển thị chúng trong mẫu của bạn. Vì vậy, hãy thử một cái gì đó như sau:

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>