Если два компонента имеют родительские и дочерние отношения, вы можете использовать декораторы @Input () @Output ().
4 способа обмена данными между угловыми компонентами
Взаимодействие компонентов
Пример ввода-вывода
Родительский компонент
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Stephen } from '../stephen.model';
@Component({
selector: 'app-parent',
template: `
Hello, Mr. (or Ms.): {{ selectedName }}
`,
styleUrls: ['./parent.component.css'],
encapsulation: ViewEncapsulation.None
})
export class ParentComponent implements OnInit {
stephen: Stephen;
selectedName: string;
constructor() {
this.stephen = new Stephen();
this.selectedName = this.stephen.firstName;
}
ngOnInit() {
}
updateName(selectedName: string): void {
console.log('in parent');
this.selectedName = selectedName;
}
}
дочерний компонент
import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { Stephen } from '../../stephen.model';
@Component({
selector: 'app-child',
template: `
{{ stephen.firstName }}
{{ stephen.lastName }}
{{ stephen.fullName }}
`,
styleUrls: ['./child.component.css'],
encapsulation: ViewEncapsulation.None
})
export class ChildComponent implements OnInit {
@Input() stephen: Stephen;
@Output() onNameSelected: EventEmitter;
constructor() {
this.onNameSelected = new EventEmitter();
}
ngOnInit() {
}
clicked(name: string): void {
this.onNameSelected.emit(name);
}
}
Важно - второе решение
Но в вашем случае эти 2 компонента, похоже, не имеют отношения родитель-потомок. Если вы хотите обмениваться данными между двумя компонентами, вы можете создать совместный сервис. Эта служба будет содержать EventEmitter, на который компонент, который нуждается в последнем изменении, подпишется в методе ngOnInit, а компонент, который будет иметь последние данные, будет вызывать функцию из этого совместно используемого сервиса для генерации этого события.
совместное обслуживание
import { Injectable, Output, EventEmitter } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MessengerService {
@Output() change: EventEmitter<any> = new EventEmitter();
sendData(data: any): any {
this.change.emit(data);
}
}
Компонент, который хочет знать об этом изменении, подпишется на это событие в этом ngOnInit, как это.
messengerService.change.subscribe(emitedValue => {
this.value = emitedValue;
});
Компонент, который имеет новое изменение, вызовет метод sendData - сервис messenge / share-совместимый, чтобы публиковать новые данные подписчикам событий, когда это требуется.