У меня есть компонент заголовка, у которого есть автозаполнение поиска, когда пользователь что-то ищет и выбирает один элемент из раскрывающегося списка предложений, тело будет соответствующим образом изменено. В теле 3 раздела, которые отображаются на основе трех различных условий. Здесь заголовок и тело - это 2 разных компонента. Следовательно, как вызвать функцию в теле, которая имеет некоторую логику вместе с ложными и истинными переменными. когда пользователь выбирает что-то из раскрывающегося списка автозаполнения поиска.
Я пытаюсь общаться через сервисный подход.
Код заголовка
<div class="docs-example-viewer-body custom-search" *ngIf="showSearch">
<select class="search-dropdown">
<option value="1">All</option>
<option value="2">Brand</option>
<option value="3">Molecule</option>
</select>
<app-auto-complete [mySearchData]="mySearchData" (onchange)="onchange($event)" (onsearchKey)="getOnsearchkey($event)"></app-auto-complete>
<i class="material-icons">search </i>
</div>
Основной код
<div *ngIf="aaa"> 123</div>
<div *ngIf="bbb"> 333</div>
компонент заголовка ts
onChange(value) {
this.planningService.changeOccured(value);
}
служба планирования ts
@Output() change: EventEmitter<any> = new EventEmitter();
changeOccured(value) {
this.change.emit(value);
}
и пытаемся поймать событие из такого компонента тела. Но это не срабатывает в компоненте тела. в чем проблема
компонент тела
onChange(value){
this.isSearchScreen = false;
this.isPlanListScreen = true;
this.isCreateScreen = false;
console.log('value',value)
this.myPlan.moleculeId = value.id;
this.selectedCombination = new SelectedCombination(value.brand,value.name);
this.planningService.getProductMapData(value.name).subscribe((data)=>{
this.strengthANdPacks = data;
},(error)=>{
console.log(error);
});
this.planningService.getAllPlans(value.id,false).subscribe((data)=>{
this.allPlans = data;
},(error)=>{
console.log(error);
});
}
ngOnInit(){
this.planningService.change.subscribe(value => {
console.log('change occured')
this.onChange(value)
});
}
Я не могу поймать событие из службы в компоненте тела. Может кто-нибудь мне помочь
Ссылка: https://medium.com/dailyjs/3-ways-to-communicate-between-angular-components-a1e3f3304ecb
