從 Angular 10 中的另一個組件獲取價值

Question

我有 2 個組件，稱為subscription.ts和home.ts在訂閱時我有一個檢查用戶是否訂閱的功能。 function如下

checkSubscriptionStatus(): any {

    this.apiService.getSubscriptionStatus().subscribe((getData: any) => {
        this.subsStatus = getData.data.subscription.status;
      },
      error => {
        this.subsStatus = '';
        if (error.status !== 401) {
          this.commonService.showNotificationMessage('Something went wrong. Try again!', 'text-danger');
        }
      });
  }

我想在this.subsStatus的視圖上使用home.ts的值，即在home.html上。 我嘗試添加<app-subscription></app-subscription>這是subscription.ts的組件選擇器，但它顯示了整個subscription.html視圖。 我只想使用變量。 我怎樣才能做到這一點？ 提前致謝。

Answer 1

我想，我有兩個解決方案給你，這是第一個。 它有點復雜。

方式一：
首先，您可以使用將在 2 個類之間共享數據的中間服務。 該服務將如下所示=>

import { EventEmitter, Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class MyService {
  mystatusChanged: EventEmitter<any> = new EventEmitter();
  mystatus: any;
  constructor() {}
  get data(): any {
    return this.mystatus;
  }
  set data(val: any) {
    this.mystatus = val;
    this.mystatusChanged.emit(val);
  }
}

在這里，您可以get和set數據的方法。 同時，當數據更新時，將發出一個事件。 因此，您可以在subscription.ts和home.ts文件中使用該服務。 在subscription文件中，您將在checkSubscriptionStatus function 中設置該服務的數據。 另一方面，您必須在home.ts中訂閱事件，如下所示=>
在 subscription.ts 文件中：

constructor(private mysrvc:MyService){
    
  }    
checkSubscriptionStatus(): any {
       this.mysrvc.data='Active Status';  //set your status.
     
}

在 home.ts 文件中：

constructor(private mysrvc:MyService){
     mysrvc.mystatusChanged.subscribe(status=>this.updatedStatus(status));
}
updatedStatus(status){
    console.log(status);
}

現在，您可以通過創建SubscriptionComponent的 object 來調用checkSubscriptionStatus ，並且 home 組件將獲得更新的值。
演示示例 Stackblitz 鏈接。
方式二：
您可以使用@ViewChild 、 hidden和@Output來實現它=>
subscription.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'subscription',
  template: `<h1>subscription</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class SubscriptionComponent  {
   @Output() myUpdatedStatus = new EventEmitter<string>();
  checkSubscriptionStatus(){
     this.myUpdatedStatus.emit("Active Status");
  }
}

適用於家用 HTML

<subscription #child hidden (myUpdatedStatus)="showStatus($event)"></subscription>
<br><button (click)="myClick()">Click Me!!</button>
<br>
<label>{{status}}</label>

對於家庭 TS：

export class AppComponent  {
  @ViewChild('child') child:SubscriptionComponent;
  status:any;
  
  showStatus($event){
    console.log($event);
    this.status=$event;
  }
  myClick(){
    this.child.checkSubscriptionStatus();
  }
}

演示示例 Stackblitz 鏈接。

Answer 2

您需要使用服務來跨組件共享數據。