Отправьте выпадающие значения компонента на два уровня вверх по угловому с помощью Event Emitter

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)
  }

}

Ресурс: ниже только для parent-child,поиск несвязанных дел «дед» или «родной брат»

Каков наилучший способ использования вложенных компонентов в Angular 4 и вызов метода родительского для потомка и наоборот?

Answer 1

Итак, у вас есть источник, скажем, ComponentA, а над ним несколько компонентов, скажем, ComponentV.

Чтобы подключить их, вам нужно сначала подключить их через службу. Если есть только один экземпляр каждого из них, вы можете использовать услугу синглетного доступа (имеет providedIn: 'root' в @Injectable decorator). Однако, если у вас может быть несколько ComponentV, которые содержат 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);
}
...

Затем вам нужно подписаться на наблюдаемое вкомпонент верхнего уровня

// CompoentV contents
...
constructor(private readonly someService: SomeService) {
  // here we subsribe to changes and use whatever handler we need
  this.someService.data$.subscribe(data => {
    // some logic goes here or pass this data to a method
  });
}
...

Это позволяет разделить некоторое состояние или события между несвязанными или слабо связанными компонентами.