Общайтесь между двумя дочерними компонентами в угловом 2

Question

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

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

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

Как его разрешить? Заранее благодарен

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

рядом решений с использованием @Input/@Output и родительский компонент в качестве «моста», общий способ будет также вводя общий сервис. Служба должна быть предоставлена ​​в родительском компоненте, чтобы дети могли совместно использовать один экземпляр службы (How do I create a singleton service in Angular 2?).

Базовый пример с использованием BehaviorSubject as a delegate:

@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 - Interaction between components using a service

Answer 4

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

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