從一個組件傳遞的數據在另一個組件中顯示未定義

Question

我有兩個組件，在這里傳輸數據的服務是我的服務：

import { Injectable } from '@angular/core';
 @Injectable({
  providedIn: 'root'
  })
export class DataService {

public sharedData:any;
constructor() { }
}

我向兩個組件注入了服務，這是我發送數據的第一個服務：

constructor(private http:HttpClient,private dataService:DataService)
{ }


    this.http.post("backendURL",quote).subscribe(s=>{
     this.dataService.sharedData=s;
         }

這是我使用服務的第二個組件：

     public modaldata:any;
     constructor(private dataServce:DataService) {  }

我只想提醒數據，但它顯示 undefiend：

  ngOnInit(): void {
 alert(this.dataServce.sharedData);
                   }

有什么想法嗎？提前致謝

Answer 1

嘗試下面的方法也可以用一組數據behaviourSubject()和viewChild()

• 使用服務

1.DataService.ts

sharedData: any;

getData(){
    return this.sharedData;
}

setData(data){
    this.sharedData = data;
}

2.設置數據組件.ts

this.http.post("backendURL",quote).subscribe(s=>{
    this.dataService.setData(s);
  }

3.獲取數據到其他組件

 ngOnInit(): void {
      const data = this.dataService.getData();
      console.log(data);
  }

• 在這里使用viewChild不需要使用服務就可以直接訪問任何方法和屬性。

1.setdata 你的組件

   public shareData : any;
   ngOnInit(){
       this.http.post("backendURL",quote).subscribe(s=>{
         this.shareData = s;
       }
   }

2.獲取數據到其他組件

  @ViewChild(YourComponent) private getData: YourComponent;

  ngOnInit(): void {
      const data = this.getData.shareData;
      console.log(data);
  }

Answer 2

這種方法的問題在於，當您嘗試使用alert顯示sharedData ，API 調用尚未完成。

在 Angular 中最棒的是 RXJS（不僅如此，您還可以將它與多個其他庫和框架一起使用）。 通過利用 observables 和主題的力量，您可以通過這個賽車條件問題。

例如，嘗試將sharedData轉換為BehaviorSubject ，然后您可以執行以下操作：

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private sharedDataSubject = new BehaviorSubject<any>(null);

  public sharedData$: Observable<any>;

  constructor() {
    this.sharedData$ = this.sharedDataSubject.asObservable();
  }

  public updateSharedData(data: any): void {
    this.sharedDataSubject.next(data);
  }
}

當您的數據可用時，您可以像這樣更新共享數據：

this.http.post("backendURL", quote).subscribe(data => {
  this.dataService.updateSharedData(data);
});

要使用它，您只需要訂閱該公共可觀察對象：

ngOnInit(): void {
  this.dataService.sharedData$.pipe(
    filter(data => !!data) // filter out the first null value
    // or replace the BehaviorSubject with Subject if you do not need a default value
  ).subscribe(data => {
    alert(this.dataServce.sharedData);
  });
}

不過有一個警告。 對於您創建的 observable，您還需要管理訂閱以免造成內存泄漏。 如果您在組件中訂閱了這個 observable，那么您還需要在組件被銷毀時取消訂閱。 或者，您可以使用模板中的async管道來呈現數據，然后您無需手動處理訂閱。

在消費組件（執行訂閱的組件）中，您需要將訂閱存儲在某處。 對此有多種方法，但我發現以下內容有些簡單：

private subscriptions = new Subscription();

所有對subscribe的調用都會返回這樣一個Subscription對象，您可以在需要時使用它來取消訂閱。 在這種情況下， ngOnInit實現變成了這樣：

ngOnInit(): void {
  const sub = this.dataService.sharedData$.pipe(
    filter(data => !!data)
  ).subscribe(data => {
    alert(this.dataServce.sharedData);
  });
  this.subscriptions.add(sub);
}

你還需要一個ngOnDestroy來取消訂閱：

ngOnDestroy() {
  this.subscriptions.unsubscribe();
}

Answer 3

試試這個data.service.ts

import { Injectable } from '@angular/core';
 @Injectable({
  providedIn: 'root'
  })
export class DataService {

private sharedData = new BehaviorSubject<any>(null);

   constructor() { }

   setData(data: any) : void {
      this.sharedData.next(data);
   }

  getData(): Observable<any> {
     return this.sharedData.asObservable();
  }
}

在傳遞數據的組件中執行此操作

constructor(private http:HttpClient,private dataService:DataService)
{
    this.http.post("backendURL",quote)
      .subscribe(s => {
          this.dataService.setData(s);
         });
}

在接收數據的組件上執行此操作：

ngOnInit(): void {
  this.dataServce.getData().subscribe(data => {
     alert(data);
  });

}