Я очень новичок в angular 2. У меня есть проблема для связи между двумя компонентами. Когда у меня есть макет с родителем и некоторыми дочерними компонентами, легко установить переменные дочерних компонентов с аннотацией @Input.
Но теперь у меня есть макет одного родительского компонента (в основном для макета) и двух дочерних компонентов:
У дочернего компонента 2 есть пучок кнопок, который создает только простое сообщение. Теперь я хочу отобразить это сообщение в дочернем компоненте.
Как мне его решить? Спасибо заранее
Вы можете использовать @ViewChild и @Output для обновления свойств в дочернем компоненте.
В качестве альтернативы вы можете использовать
@Input вместо @ViewChild.
Подход, предложенный seidme, также будет работать отлично. Это зависит только от вашего варианта использования.
Пример использования @ViewChild и @Output:
https://plnkr.co/edit/r4KjoxLCFqkGzE1OkaQc?p=preview
Пример использования @Input и @Outputhttps://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview
Помимо решений с использованием @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 - Взаимодействие между компонентами с помощью службы
Простым способом является установка вывода с @Output в дочернем компоненте2 в качестве события и передача события с сообщением, переданным как данные его при нажатии кнопки. Затем прослушайте это событие в своем родительском компоненте и обновите свойство, которое устанавливается как вход вашего дочернего компонента1, когда происходит событие.
Ниже приведено изображение, в котором четко показан механизм
Вы можете использовать переменные шаблона для ссылки на родных братьев:
<child1 #child1></child1>
<child2 (someOutput)="child1.doSomething($event)"></child2>