Как я могу общаться между двумя дочерними компонентами в angular?

Я очень новичок в angular 2. У меня есть проблема для связи между двумя компонентами. Когда у меня есть макет с родителем и некоторыми дочерними компонентами, легко установить переменные дочерних компонентов с аннотацией @Input.

Но теперь у меня есть макет одного родительского компонента (в основном для макета) и двух дочерних компонентов:

У дочернего компонента 2 есть пучок кнопок, который создает только простое сообщение. Теперь я хочу отобразить это сообщение в дочернем компоненте.

Как мне его решить? Спасибо заранее

Ответ 1

Вы можете использовать @ViewChild и @Output для обновления свойств в дочернем компоненте.

В качестве альтернативы вы можете использовать @Input вместо @ViewChild.

Подход, предложенный seidme, также будет работать отлично. Это зависит только от вашего варианта использования.

Пример использования @ViewChild и @Output: https://plnkr.co/edit/r4KjoxLCFqkGzE1OkaQc?p=preview

Пример использования @Input и @Outputhttps://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview

Ответ 2

Помимо решений с использованием @Input/@Output и родительского компонента в качестве "моста", общий способ также будет представлять общую службу. Служба должна быть предоставлена в родительском компоненте, чтобы дети могли совместно использовать один экземпляр службы (Как создать однопользовательский сервис в Angular 2?).

Основной пример с помощью BehaviorSubject как делегата:

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

Детский компонент 1:

export class ChildComponent1 {

    constructor(private _sharedService: SharedService) { }

    sendMessage(): void {
        this._sharedService.messageSource.next('Hello from child 1!');
    }
}

Детский компонент 2:

export class ChildComponent2 {

    constructor(private _sharedService: SharedService) {
        this._sharedService.messageSource.subscribe((message: string) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
     }
}

См. также этот пост: Angular2 - Взаимодействие между компонентами с помощью службы

Ответ 3

Простым способом является установка вывода с @Output в дочернем компоненте2 в качестве события и передача события с сообщением, переданным как данные его при нажатии кнопки. Затем прослушайте это событие в своем родительском компоненте и обновите свойство, которое устанавливается как вход вашего дочернего компонента1, когда происходит событие.

Ниже приведено изображение, в котором четко показан механизм

Ответ 4

Вы можете использовать переменные шаблона для ссылки на родных братьев:

<child1 #child1></child1>
<child2 (someOutput)="child1.doSomething($event)"></child2>