Question

我的角度应用程序中有2个组件。组件A是标题，而组件B在组件A中设置了我需要的值。问题是，组件A在B之前设置了，因此在需要时不显示我需要的值。如果刷新浏览器，它将显示。我的代码会更好地解释。

组件A

  offerExpiry: any;

  constructor(
    public expiry: ExploreOfferService
  ) {

  }
  ngOnChanges() {
    this.expiry.event.subscribe((data) => {
      this.offerExpiry = data;
    });
  }

  <div class="col-5 right">
    <div>
      <span *ngIf="offerExpiry">{{offerExpiry?.data}} days left to respond</span>
      <img src="../../../../assets/icons/calendar(old).png">
    </div>
  </div>

组件B

offerExpiry: any;

...

  async ngOnInit() {
    if (this._exploreService.offer) {
      ...
    } else {
      const offer = await this._exploreService.getOfferDetails();
      const date1 = new Date(offer.expiryDate);
      const date2 = new Date(offer.startDate);
      const diffTime = Math.abs(date2.getTime() - date1.getTime());
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
      this.offerExpiry = diffDays;
      this._exploreService.publishExpiryDate({data: this.offerExpiry});
    }
  }

服务文件

  public publishExpiryDate(data: any) {
    this._subject.next(data);
  }

Answer 1

从服务中获取数据时，请在服务中执行此操作：创建一个主题和一种方法来使它在组件B中被订阅

private com_sub = new Subject<any>();
getData(): Observable<any> {
   return this.com_sub.asObservable();
}

无论何时从服务中获取数据，都将其传递给主题：

this.com_sub.next(data);

在加载较早的组件B中，该主题的订阅方式如下：

this.yourservice.getData().subscribe(data => {
  console.log('your data here',data);
});

Answer 2

在服务文件中创建任何类型的变量，然后需要在行为订阅者中分配该变量，该订阅者将在组件B加载时进行侦听，并在组件A的onInit（）中订阅该变量。

Answer 3

ngOnChanges是组件绑定更改的生命钩子，而不是在那里订阅可观察的方法，而是在构造函数中或ngOnInit中订阅服务变量

Service.ts

public getSubject() {
    return this._subject;
}

public publishExpiryDate(data: any) {
    this._subject.next(data);
}

在组件A中，

constructor(service: Service) {
    this.service.getSubject().subscribe((data) => {
      this.offerExpiry = data;
    });
}

Answer 4

在您的模块中创建一个共享的Observable服务，一旦从组件B设置了值，就更新了该值，并订阅了组件A中的该可观察变量。

步骤如下

步骤1：创建共享的可观察服务

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

constructor(
) { }


public updatedValue = new BehaviorSubject<object>([]);
 changeInUpdatedValue(value = {}) {
    this.updatedValue.next(value);
 }
}

第2步：将服务导入到构造函数中，并在收到值后从组件B调用方法changeInUpdatedValue函数

 constructor( 
    private _observablesService: ObservablesService,
) { 
   //in data you can send your updated value whatever it is array,object or string
  this._observablesService.changeInUpdatedValue({ status: true, data: {} });
}

第3步：一旦接收到该值，就将该服务导入到构造函数中，并从组件中导入一个subscription方法updatedValue函数

  constructor( 
    private _observablesService: ObservablesService,
) { 
  this._observablesService.updatedValue.subscribe((result: any) => {
     //you will receive your value here
  })
}

谢谢

检查变量中的值更改

4 个答案: