Как передать данные от одного компонента к другому в angular?
1 ответ
@bernardo_nolan
В Angular данные между компонентами можно передавать с помощью свойств и событий.
- Передача данных с использованием свойств:
- Создайте свойство в родительском компоненте, которое будет содержать данные.
- Передайте это свойство в дочерний компонент с помощью привязки свойств [@Input()].
- В дочернем компоненте вы можете использовать переданные данные. Вот пример кода:
// родительский компонент
@Component({
selector: 'app-parent',
template: <h1>Родительский компонент</h1> <app-child [data]="parentData"></app-child>})
export class ParentComponent {
parentData: string = 'Данные от родительского компонента';
}
// дочерний компонент
@Component({
selector: 'app-child',
template: <h2>Дочерний компонент</h2> <p>{{ data }}</p>})
export class ChildComponent {
@Input() data: string; // свойство для передачи данных
}
- Передача данных с использованием событий:
- Создайте событие в дочернем компоненте с помощью EventEmitter.
- Подпишитесь на это событие в родительском компоненте и выполните необходимые действия при его возникновении. Вот пример кода:
// родительский компонент
@Component({
selector: 'app-parent',
template: <h1>Родительский компонент</h1> <app-child (dataEvent)="handleDataEvent($event)"></app-child>})
export class ParentComponent {
handleDataEvent(data: string) {
// выполняйте необходимые действия при возникновении события
}
}
// дочерний компонент
@Component({
selector: 'app-child',
template: <h2>Дочерний компонент</h2> <button (click)="emitDataEvent()">Передать данные</button>})
export class ChildComponent {
@Output() dataEvent: EventEmitter = new EventEmitter(); // событие для передачи данных
emitDataEvent() { const data: string = 'Данные от дочернего компонента'; this.dataEvent.emit(data); } }
Это два наиболее распространенных способа передачи данных между компонентами в Angular.