Как передать данные от одного компонента к другому в angular?

Пользователь

от bernardo_nolan , в категории: JavaScript , 10 месяцев назад

Как передать данные от одного компонента к другому в angular?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от lilla.herman , 9 месяцев назад

@bernardo_nolan 

В Angular данные между компонентами можно передавать с помощью свойств и событий.

  1. Передача данных с использованием свойств:
  • Создайте свойство в родительском компоненте, которое будет содержать данные.
  • Передайте это свойство в дочерний компонент с помощью привязки свойств [@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; // свойство для передачи данных }

  1. Передача данных с использованием событий:
  • Создайте событие в дочернем компоненте с помощью 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.