Question

我有2个组成部分。组件A和B。组件B具有我要在组件A中获取的值。组件B与A位于不同的文件夹中。如何在不使用localStorage之类的情况下将值发送给A。

这是我的上下文代码。

组件B

@Input() offerExpiry: any;

  async ngOnInit() {
    this._loader.start();
    if (this._exploreService.offer) {
        ...
    } else {
      const offer = await this._exploreService.getOfferDetails();
      //value I need is 'this.offerExpiry'
      this.offerExpiry = offer.expiryDate;
    }
    this._loader.stop();
  }

组件A

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-offer-subheader',
  templateUrl: './offer-subheader.component.html',
  styleUrls: ['./offer-subheader.component.scss']
})
export class OfferSubheaderComponent {

  @Input() title: string;
  @Input() active: string;
  @Output() back = new EventEmitter();
  @Output() offerExpiry: any;

  onBack() {
    this.back.emit();
  }

}

我正在尝试使用输入，输出，但没有成功

Answer 1

您可以通过两种方式解决它：

您需要创建多个父组件或使用您的应用组件，组件B具有@Output（）和组件A @Input（）。您订阅组件B @Output的更改并将其值设置为Parent 组件，并将其传递给组件A的输入。

创建这样的服务：

导出类ExchangeService { 私有值$：BehaviorSubject = new BehaviorSubject（1）;

  get value() {
    return this.value$.asObservable();
  }

  updateValue(value: number) {
    this.value$.next(value);
  }
}

并将其注入您的两个组件中，并享受数据管理的乐趣

从Angular中分离的组件转移价值

1 个答案: