Как вызвать метод одноуровневого компонента в angular 4? - PullRequest
Новая
       40

Как вызвать метод одноуровневого компонента в angular 4?

0 голосов
/ 18 мая 2018

У меня есть компонент заголовка, в котором выполняется автозаполнение поиска, когда пользователь ищет что-то и выбирает один элемент в раскрывающемся списке предложений, тело изменится соответствующим образом.В теле есть 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);
}

и попытка перехватить событие из компонента тела следующим образом.Но это не срабатывает в компоненте тела.в чем проблема
компонент тела ts 

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

1 Ответ

0 голосов
/ 18 мая 2018

Чтобы вызвать метод дочернего компонента из родительского компонента, вы можете использовать ViewChild.

В своем родительском классе вы должны импортировать дочерний компонент 

import { ChildComponent } from './child-component.ts';

, а затем использовать нечто подобное: 

@ViewChild(ChildComponent) childComponent: ChildComponent;

Тогда у вас будет доступ к методам и свойствам дочерних компонентов: 

childComponent.myMethod()

или 

this.parentComponentValue = childComponent.property
...