file.html中的角插入服务 [英] Angular insert service in the file.html

问题描述

我正在使用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:

 导出类DraftService {公共错误消息:字符串;public isWarningProblem:布尔值;构造函数(私有generalErrorService:GeneralErrorService，私人http:HttpClient){[...]}公开launchPingEditReadDraftByActionOfferIdUrl(操作:字符串，offerIdUrl:字符串):订阅{返回间隔(10).subscribe(()=>{//从服务器获取变量并进行设置.}，()=>{});}} 

我希望使用服务，因为该算法与其他组件相同，但是它们看不到其他组件的变量.因此，我不能将订阅与行为主题"和可观察的"一起使用:

有没有更好的解决方案?

解决方案

不，将服务结果直接呈现到模板中不是最佳实践.最好将您的 service 作为 dependency (Dependency Injection)注入到您的组件中，该组件会设置一些 variables 与服务结果并将其呈现在模板中.所以尝试这样的事情:

app.service.ts

 从'@ angular/core'导入{可注入}；从'rxjs'导入{Observable，Subject};@Injectable({{provedIn:'root'})导出类DraftService {私人errorMessage $ = new Subject< string>();私人isWarningProblem $ = new Subject< boolean>();构造函数(私有generalErrorService:GeneralErrorService，私人http:HttpClient){this.launchPingEditReadDraftByActionOfferIdUrl();}sendErrorMessage(消息:字符串){this.errorMessage $ .next({text:message});}clearErrorMessages(){this.errorMessage $ .next();}onErrorMessage():Observable< any>{返回this.errorMessage $ .asObservable();}公共launchPingEditReadDraftByActionOfferIdUrl(操作:字符串，offerIdUrl:字符串):订阅{interval(10).subscribe((res)=>{this.sendErrorMessage(res.errorMessage);//另一个像这样});}} 

app.component.ts

 从'@ angular/core'导入{组件};从'./draft-service'导入{DraftService};@零件({选择器:"app-template"，templateUrl:"./template.component.html"，styleUrls:['./template.component.css']，})导出类TemplateComponent {公共错误消息:字符串;public isWarningProblem:布尔值;构造函数(私人_draftService:DraftService，){}ngOnInit(){this._draftService.onErrorMessage().subscribe(res =>{this.errorMessage = res//另一个像这样});}} 

app.component.html

 < ng-container * ngIf ="isWarningProblem">< ngb-alert [dismissible] ="false"类型=警告"；style ="text-align:center"{{错误信息}}</ngb-alert></ng-container> 

I'm using Angular 7 (and one day I have to upgrade my version). I have a service that have some variables that can change according to some Promise (http GET, PUT, ... response).

I wish to print these variables on a template.

Can I do this:

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

}

I wish to use service because the algorithm is equal to another components but they cannot see the variables of others components. So, I can not use the subscription with Behavior Subject and Observable:

Are there any better solutions?

解决方案

No, it is not the best practice to render the service result directly into the template. It's better to inject your service as a dependency (Dependency Injection) into your component which set some variables with service result and render those in your template. So try something like this:

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>

这篇关于file.html中的角插入服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！