Question

我正在尝试在两个不相关的组件之间发送数据。我正在尝试利用事件发射器输出和地址服务。

如何获取第一个地址下拉事件发射器，以将数据传递给服务？然后该服务可以将数据发送到接收器。

export class AddressDropdownComponent implements OnInit {

  addresses: any[] = [];
  @Input() addressDefaultItem: AddressDto;
  @Input() selectedAddress: any;
  @Input() TxtField: string = 'addressDescription';
  @Output() selectedItemOutput = new EventEmitter();

  constructor(private addressService:AddressServiceProxy ) { }

  ngOnInit() {
  }

  statusSelectedItemChanged(e) {
    this.selectedAddress = e;
  }

仍在使用此地址服务

export class AddressService {

  private messageSource = new BehaviorSubject("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

资源：以下内容仅适用于亲子，寻找无关的“祖父”或“兄弟”案例

What is the best way to use nested components in Angular 4 and calling a method of a parent to child and vice versa?

Answer 1

因此，您有一个来源，例如ComponentA，在它之上的某个组件的多个级别，例如ComponentV。

要连接它们，您首先需要通过服务连接它们。如果每个实例只有一个实例，则可以使用单调服务（@Injectable装饰器中有providedIn: 'root'）。但是，如果可以有多个包含ComponentV的{{1}}，则需要在层次结构的顶层提供此服务。在这种情况下，ComponentA必须具有ComponentV才能在创建providers: [SomeService]时创建新的服务实例。

然后，您在ComponentV中定义一些道具来共享数据。

例如，您最终得到

SomeService

然后，您将此服务注入// SomeService contents ... // create a source private dataSource$ = new Subject(); // Expose as observable so it's value can be changed // only via exposed method (dataChanged) data$ = this.dataSource$.asObservable(); // public API to pass new data dataChanged(data) { this.dataSource$.next(data); } ...中，并定义一个函数以发出数据更改。

ComponentA

然后，您需要订阅顶级组件中的可观察对象

// ComponentA contents
...
constructor(private readonly someService: SomeService) {}

onDataChange(data) {
  // here we notify about data change
  this.someService.dataChanged(data);
}
...

这允许人们在不相关或松散相关的组件之间共享某些状态或事件。

使用事件发射器在Angular中将组件下拉列表的值上调两个级别

1 个答案: