У меня этот код ... Это пример учебного приложения, которое я пытаюсь построить, отражая ежедневные потребности разработчика. Фактически, когда пользователь набирает «огонь» на родительском компоненте, дочерний элемент выполняет событие, которое отправляет родительскому слову слово «booom». Это образец для демонстрации связи между дочерним компонентом, отправляющим сообщения в родительский компонент, с использованием @Input и OnChanges.Угловая 2 - Двусторонняя связь между компонентами
Теперь я пытаюсь сделать другое: родитель должен каким-то образом сообщить ребенку сообщение, подобное «Целевое закрытие» для ребенка, когда пользователь нажимает клавишу ввода (keyCode = 13). При этом у нас будет сценарий двухсторонней связи между компонентами.
Каков наилучший подход?
child.component
import {Component, Input, OnChanges, EventEmitter,Output, Injectable} from 'angular2/core';
@Injectable()
@Component({
selector: 'child-component',
template: `<p>I'm the child component</p>
`
})
export class ChildComponent implements OnChanges {
@Input() txt: string;
@Output() aim: EventEmitter<any> = new EventEmitter();
ngOnChanges(changes: {[propName: string]: SimpleChange}) {
var t = changes['txt'].currentValue;
if(t == 'fire') {
console.log('Fire !!!');
this.aim.emit("booom !!!");
}
}
}
parent.component
import {Component} from 'angular2/core';
import {ChildComponent} from './child.component'
@Component({
selector: 'parent-component',
directives : [ChildComponent]
template: `<p>I'm the parent component</p>
<input type="textbox" [(ngModel)]="theModel" (keydown)="arrow($event)">
<p>feedback: {{feedback}}</p>
<child-component txt="{{theModel}}" (aim)="feedback=$event"></child-component>
`
})
export class ParentComponent {
theModel;
feedback;
arrow (evt){
if(evt.keyCode ==13) {
//Need to cause an event on the child - a message like "Target Locked"
};
}
}
Используйте '@Input()' для связи от родителя к дочернему элементу и '@Output()' для связи от дочернего элемента к родительскому объекту или использования службы. –
«Теперь я пытаюсь по-другому:« Я не вижу здесь разницы. Просто используйте те же свойства ввода и вывода и отправьте разные сообщения или добавьте еще один набор свойств ввода и вывода. Также проверьте [кулинарная книга по взаимодействию компонентов] (https://angular.io/docs/ts/latest/cookbook/component-communication.html) –
Родитель включает дочерний элемент ny с помощью импорта и селектор. Таким образом, родитель может захватить (цель) событие от ребенка. Мое сомнение заключается в том, чтобы сделать обратный путь: ребенок захватывает событие родителя. Помните, что у ребенка никогда не будет селектора родителя. Вот почему все по-другому. понял? –