Question

我有3个组成部分 1. LeftMenuComponent 2. AppComponent 3. SummeryComponent

此外，我有两个服务，一个用于rest调用，另一个用于将数据共享给组件。（RestService，ComponentService）

在选择时，来自LeftMenuComponent的列表我正在调用loadService（）函数，然后从那里我调用emit包含服务summeryComponent的函数。订阅restservice以提取数据并发出数据。

一切正常，但我必须单击两次。我需要一键更改数据，并一键反映在summerycomponent中。

我也尝试使用rxjs / Subscription，但结果相同。

Left-memu-component.html

<mat-list-item><a routerLink="/summery" (click)="loadService($event, subitem.CATID, subitem.ID)">{{subitem.NAME}}</a></mat-list-item>

Left-Menu-Component.ts

import { Component, OnInit } from '@angular/core';
import { RestService } from '../rest.service';
import { Category } from '../models/category.model';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import { map } from 'rxjs/internal/operators/map';
import { ComponentService } from '../component.service';
@Component({
  selector: 'app-left-menu',
  templateUrl: './left-menu.component.html',
  styleUrls: ['./left-menu.component.css']
})

export class LeftMenuComponent implements OnInit {
 showFiller = false;
  constructor(private restService:RestService,private componentService:ComponentService) { }
  localdata:Category[];

  ngOnInit() {
    this.restService.getAllDepartment().subscribe(data=> this.localdata = data );
  }

  loadService(event,CATID,SUBID?){
    console.log(CATID);
    console.log(SUBID);
    this.componentService.getSummery(CATID,SUBID);
  }


}

summery-component.html

<div class="container-fluid example-sidenav-content">
  <div>
    <div class="row mt-4">
      <div class="col-lg-3" *ngFor="let item of summery">

        <mat-card class="example-card">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>{{item.TITLE}}</mat-card-title>
            <mat-card-subtitle>{{item.SUBTITLE}}</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
          <mat-card-content>
            <p>
              {{item.CONTENT}}
            </p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>LIKE</button>
            <button mat-button>SHARE</button>
          </mat-card-actions>
        </mat-card>

      </div>
    </div>
  </div>
</div>

Summery-Component.ts

import { Component, OnInit } from '@angular/core';
import { RestService } from '../rest.service';
import { Summery } from '../models/summery.model';
import { ComponentService } from '../component.service';

@Component({
  selector: 'app-summery',
  templateUrl: './summery.component.html',
  styleUrls: ['./summery.component.css']
})
export class SummeryComponent implements OnInit {


  constructor(private restService:RestService,private componentService:ComponentService) { }
  summery:Summery[];
  ngOnInit() {
    if(this.summery==null)
    {
      this.restService.getSummery().subscribe(data=>this.summery=data);
    }
    this.componentService.change.subscribe(change=>
    {
      this.summery = change;
    }
    );



  }

}

component-service.ts

import { Injectable, Output, EventEmitter } from '@angular/core';
import { Summery } from './models/summery.model'
import { RestService } from './rest.service';
import { BehaviorSubject } from 'rxjs';


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

  summery : Summery[]=null;


  constructor(private restService:RestService) { 
    this.summery = null;
    console.log(this.summery);
  }


@Output() change:EventEmitter<Summery[]> = new EventEmitter();

  setSummery(CATID,SUBID?){
    this.restService.getSummery(CATID,SUBID).subscribe(data=>this.summery=data);
    console.log("chekc");
  }
   getSummery(CATID,SUBID?){
     this.restService.getSummery(CATID,SUBID).subscribe(data=>this.summery=data);
    this.change.emit(this.summery);
    console.log("chekc");
    return this.summery;
  }

}

rest-service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';
import { first } from 'rxjs/internal/operators/first';
import { Category} from './models/category.model';
import { error } from 'util';
import { Summery } from './models/summery.model';
import { Summary } from '@angular/compiler';
// import { Category } from 'src/app/models/category.model';

@Injectable({
  providedIn: 'root'
})

export class RestService {
  public _url: string = "http://localhost:52343/api/";


  constructor(private http: HttpClient) { }
  getAcess(username:string, password:string): Observable<any>{

    let main_url = this._url + "User";
    let params = new HttpParams();
    params= params.append('username', username);
    params= params.append('password', password);
    console.log(main_url);
    return this.http.get(main_url,{ params: params });
  }

  getAllDepartment():Observable<Category[]>{

    let main_url = this._url + "getProjectList";
    console.log(main_url);

     return this.http.get(main_url).pipe(map((data:Category[])=> data.map((item:Category) => new Category(item.ID, item.Name,item.SubDetail))));

  }

  getSummery(cid? :number,sid? :number):Observable<Summery[]>{
    let main_url = this._url +  "getSummery";
    let params = new HttpParams();
    if(cid !=null){
      params= params.append('cid', cid.toString());
    }
    if(sid !=null){
      params= params.append('sid', sid.toString());
    }
    console.log(main_url);
    // return this.http.get(main_url,{ params: params }).pipe(map((data:Summery[])=> data.map((item:Summery)=> new Summery(
    //   item.ID,
    //   item.SUBID,
    //   item.CATID,
    //   item.HEADER,
    //   item.TITLE,
    //   item.SUBTITLE,
    //   item.MEDIA,
    //   item.CONTENT
    // ))));
    return this.http.get(main_url,{ params: params });

  }
}

没有错误，只需要单击一次即可。

Answer 1

您的Observable中的subscription方法调用是异步的，因此它具有这种行为是正常的，为了使其正常工作，当您按如下所示进行订阅时，应在回调函数内发出您的值：

this.restService.getSummery(CATID,SUBID).subscribe(data => this.change.emit(data));

但您最好在不使用主题或事件发射器的情况下，在您的组件中订阅观测，而不是在服务本身中订阅。

角度休息服务在首次通话中未返回值

1 个答案: