Блог

Главная - Вопросы по программированию - Как вызвать функцию в компоненте x из компонента y?

Как вызвать функцию в компоненте x из компонента y?

#angular6

#angular6

Вопрос:

У меня есть компонент alphabatesComponent . У него есть метод postLetters() . Я хочу вызывать wordsComponent метод listOfAlphabates() всякий раз, когда я вызываю postLetters() alphabatesComponent .

// Сервис

 private _listners = new Subject<any>();
constructor(private httpClient: HttpClient) { }

listen(): Observable<any> {
    debugger;
   return this._listners.asObservable();
}

filter(filterBy: string) {
    debugger;
   this._listners.next(filterBy);
}

// алфавитный компонент

 export class alphabatesComponent {
  postLetters(): void {
    this.asynService.filter('Register click');
  }
}

// это мой компонент words

 constructor() {
this.asyncService.listen().subscribe((m: any) => {
  this.listOfAlphabates();
 }
}
 listOfAlphabates() {}

}

Комментарии:

1. С какой ошибкой вы столкнулись?

2. Пожалуйста, обратите внимание, что набор букв написан алфавитом на английском языке. Все классы должны начинаться с заглавной буквы: AlphabetComponent .

Ответ №1:

для управления состоянием используйте RxJS:

в компоненте alphabates:

 filter () {
    this.asynService.onFilterChanged.next('Registerclick');
}

в asynService:

 import {BehaviorSubject} from 'rxjs/BehaviorSubject';

public onFilterChanged: BehaviorSubject<any> = new 
       BehaviorSubject('');

в компоненте word:

 import {Subscription} from 'rxjs/Subscription';

private onFilterChanged: Subscription;

constructor(public asynService: AsynService,) {

    this.onFilterChanged = this.asynService.onFilterChanged
        .subscribe((filterBy) => {
            this.listOfAlphabates(filterBy);
        });
}

public ngOnDestroy(): void {
    // note: Do not forget to unsubscribe!
    this.onFilterChanged.unsubscribe();
}

listOfAlphabates(text) {
    console.log(text);
}
Метки: