Двухстороннее связывание данных между несколькими компонентами в angular2?
У меня есть два компонента HomePageComponent и StudentResultsComponent. У меня есть вход в HomePageComponent, который, когда я набираю, я хочу, чтобы значение было в моем входе StudentResultsComponent.
Я думал о создании отдельного компонента для ввода и вызова их в обоих компонентах, но значение не обновляется в моем StudentResultsComponent, когда я начинаю вводить HomePageComponent. Вот мой код:
Career-Search-Component.html
<input
#input
type ="text"
id ="searchInput"
class ="input-student-search validate filter-input"
placeholder ="Search by a career (Software Engineer,Web Developer,Geologist, Geogropher etc.)"
[(ngModel)] ="query"
>
Career-Search.component.ts
import {Component,OnInit,Input,EventEmitter} from '@angular/core';
@Component({
selector: 'career-search',
templateUrl: 'career-search.component.html'
})
export class CareerSearchComponent implements OnInit {
@Input() public query: string;
constructor() {}
ngOnInit() {}
}
HomePageComponent.component.html
<career-search></career-search>
<button class="submit" [routerLink]="['/students']">Search</button>
Students-result.component.html
<career-search></career-search>
Причина, по которой мне нужно передать данные из компонента домашней страницы, заключается в том, что я могу затем использовать данные для запроса к нему и показывать результаты на основе значения, передаваемого из другого компонента.
Пожалуйста помоги.
Спасибо
1 ответ
Если у ваших двух компонентов нет другого соединения, единственный известный мне способ - это использовать сервис. Ссылка, предоставленная AJT_82, имеет пример для этого, и вот самый маленький пример, который я могу придумать:
import {Component, Injectable, EventEmitter} from '@angular/core';
@Injectable()
export class InputService {
public inputEvents: EventEmitter<string> = new EventEmitter();
public inputChanged(val: string) {
this.inputEvents.emit(val);
}
}
@Component({
selector: 'observer',
template: `
<p>Input value: {{ myValue }}</p>
`
})
export class ObserverComponent implements OnDestroy {
private myValue: string;
private subscription: Subscription;
constructor(private service: InputService) {
this.subscription = this.service.inputEvents.subscribe((newValue) => {
this.myValue = newValue;
})
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
@Component({
selector: 'observable',
template: `
<input [(ngModel)]="inputValue" />
`
})
export class ObservableComponent {
private _inputValue: string;
constructor(private service: InputService) {}
public get inputValue(): string {
return this._inputValue;
}
public set inputValue(val: string) {
this._inputValue = val;
this.service.inputChanged(val);
}
}
@Component({
selector: 'app-root',
template: `
<observable></observable>
<observer></observer>
`
})
export class AppComponent {
}
Объяснение:
Компонент Observable сохраняет входное значение через двустороннюю привязку данных. В установщике мы не только сохраняем значение, но и сообщаем службе, что значение изменилось. Затем служба отправит событие inputChanged, на которое подписывается Observer. Затем он может использовать значение по своему усмотрению.