В Angular есть несколько способов передачи данных между компонентами. Рассмотрим каждый из них.
1. Использование входных и выходных свойств (@Input и @Output): С помощью входных и выходных свойств можно передавать данные между родительским и дочерним компонентами. Для передачи данных от родительского компонента к дочернему используется входное свойство, которое объявляется в дочернем компоненте с помощью декоратора @Input. Например:
ParentComponent:
import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` <h1>Parent Component</h1> <app-child [message]="message"></app-child> ` }) export class ParentComponent { message = 'Hello from parent'; }
ChildComponent:
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', template: ` <h2>Child Component</h2> <p>{{ message }}</p> ` }) export class ChildComponent { @Input() message: string; }
Таким образом, родительский компонент передает свое свойство "message" дочернему компоненту с помощью атрибута [message]="message".
2. Использование сервиса: Сервисы в Angular предоставляют механизм для обмена данными между компонентами. Сервис может быть внедрен в несколько компонентов, и каждый компонент может использовать его методы и свойства для передачи и получения данных. Например:
DataService:
import { Injectable } from '@angular/core'; @Injectable() export class DataService { private data: string; getData() { return this.data; } setData(data: string) { this.data = data; } }
ParentComponent:
import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-parent', template: ` <h1>Parent Component</h1> <button (click)="setData()">Set Data</button> ` }) export class ParentComponent { constructor(private dataService: DataService) { } setData() { this.dataService.setData('Hello from parent'); } }
ChildComponent:
import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-child', template: ` <h2>Child Component</h2> <p>{{ data }}</p> ` }) export class ChildComponent { constructor(private dataService: DataService) { } get data(): string { return this.dataService.getData(); } }
Таким образом, родительский компонент вызывает метод setData() сервиса, чтобы установить данные, а дочерний компонент вызывает метод getData() сервиса, чтобы получить данные.
3. Использование событийного шаблона: Angular предоставляет событийный шаблон, который позволяет компонентам слушать и генерировать события. Компонент может генерировать пользовательские события с помощью @Output декоратора, а другие компоненты могут подписаться на эти события с помощью шаблонного синтаксиса. Например:
ParentComponent:
import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` <h1>Parent Component</h1> <app-child (messageEvent)="receiveMessage($event)"></app-child> <p>{{ message }}</p> ` }) export class ParentComponent { message: string; receiveMessage(message: string) { this.message = message; } }
ChildComponent:
import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-child', template: ` <h2>Child Component</h2> <button (click)="sendMessage()">Send Message</button> ` }) export class ChildComponent { @Output() messageEvent = new EventEmitter<string>(); sendMessage() { this.messageEvent.emit('Hello from child'); } }
Таким образом, при нажатии на кнопку в дочернем компоненте генерируется событие messageEvent, которое передает сообщение "Hello from child" в родительский компонент.
Это лишь некоторые из возможных способов передачи данных между компонентами в Angular. В зависимости от сложности задачи можно выбрать наиболее подходящий способ.