Как передать значение информационного сообщения от разных компонентов родительскому компоненту и отобразить его все одновременно в angular 8

Question

В приложении angular есть четыре компонента, и каждый компонент имеет некоторое информационное сообщение. Я хочу передать эти сообщения от каждого компонента родительскому компоненту. Как я могу это сделать?

Answer 1

Вам нужно будет использовать @Output и EventEmitter

import { Output, EventEmitter } from '@angular/core';

export class ChildComponent  {
@Output() message: EventEmitter<string> = new EventEmitter<string>();
}

Теперь внутри любого вашего метода / на основе вашего logi c в вашем child.component.ts выполните

someMethod() {
this.message.emit('Hello');
}

Теперь внутри родительского компонента html,

<app-child (message)="onMessageReceived($event)"> </app-child>

и, наконец, внутри родительского ts,

onMessageReceived(message) {
console.log(message);
}

Если вы все еще столкнувшись с проблемами, проверьте это stackblitz

Точно так же вы можете сделать то же самое, отправив сообщения для всех ваших 4 дочерних компонентов и прослушивая события в родительском компоненте

Кроме того, если ваш вариант использования не так прост, как тот, который я показал выше, вы можете создать общую службу и внедрить в свои компоненты, обновить их в дочернем компоненте и получить к ним доступ в родительском компоненте.

Answer 2

Наиболее масштабируемое решение - создать службу и внедрить ее в родительский компонент и все дочерние компоненты. Ваши дочерние компоненты могут добавлять сообщения в службу, а родитель может получать к ним доступ. простой вариант использования.