На Angular у нас есть несколько способов передачи данных из одного компонента в другой. Однако, самый простой и популярный способ - это использование сервисов, которые можно использовать как посредник для передачи информации.
Для начала создадим сервис, который будет отвечать за передачу данных. Можно создать новый файл my-data.service.ts и поместить в него следующий код:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MyDataService {
private dataSubject = new BehaviorSubject<any>(null);
public data$ = this.dataSubject.asObservable();
constructor() { }
setData(data: any) {
this.dataSubject.next(data);
}
}
В данном примере мы создали MyDataService и определили в нем два основных элемента: dataSubject и data$. dataSubject является объектом типа BehaviorSubject из библиотеки rxjs, который будет хранить переданные данные. Затем мы определяем data$, который является обзервером на основе dataSubject, и позволяет другим компонентам подписаться на изменения данных.
Затем в компоненте, откуда мы хотим передать данные, мы можем внедрить MyDataService и использовать его метод setData для передачи данных:
import { Component } from '@angular/core';
import { MyDataService } from './my-data.service';
@Component({
selector: 'app-source-component',
template:
<button (click)="sendData()">Send Data</button>
})
export class SourceComponent {
constructor(private dataService: MyDataService) { }
sendData() {
const data = { name: 'John', age: 25 };
this.dataService.setData(data);
}
}
В приведенном примере мы создаем экземпляр MyDataService через внедрение зависимостей в конструкторе компонента SourceComponent. Затем мы создаем метод sendData, который вызывает setData() нашего сервиса и передает данные.
Теперь давайте рассмотрим компонент, который будет получать переданные данные:
import { Component, OnInit } from '@angular/core';
import { MyDataService } from './my-data.service';
@Component({
selector: 'app-destination-component',
template:
<div>
<h3>Received Data:</h3>
<p>{{ receivedData | json }}</p>
</div>
})
export class DestinationComponent implements OnInit {
receivedData: any;
constructor(private dataService: MyDataService) { }
ngOnInit() {
this.dataService.data$.subscribe(data => {
this.receivedData = data;
});
}
}
Здесь мы снова внедряем MyDataService через внедрение зависимостей, и на этот раз мы подписываемся на изменения данных, используя метод subscribe(). Когда данные изменяются, мы присваиваем их свойству receivedData, которое затем используется в шаблоне компонента для отображения данных.
Таким образом, мы использовали сервис в Angular для передачи данных из одного компонента в другой. Этот подход гибкий и может быть использован в различных сценариях передачи данных между компонентами.