Использование компонентов Angular с использованием TypeScript - PullRequest
0 голосов
/ 11 февраля 2019

Ситуация:

  • У меня есть «главная страница», где мы можем увидеть книги, которые есть в наличии.
  • «Главная страница» и синее полена рисунке те же компоненты.
  • У меня также есть компонент под названием "поиск".

Требуемый результат:

  • Я хотел бы использовать "Поиск" комп.(зеленое поле) внутри "главной страницы".
  • Я бы хотел, чтобы пользователь мог вводить информацию в поле поиска и отображать результат на «главной странице» (синее поле).

Вопрос:

Как можно подойти к этой ситуации?Я немного читал о каком-то решении типа pf parent / child - но я не чувствую, так как я вполне понимаю, как это будет работать в моем случае.

enter image description here

PS.Если кто-то считает, что вопрос недостаточно точен - вы можете изменить его!

1 Ответ

0 голосов
/ 11 февраля 2019
  1. Вы должны добавить вывод для компонента поиска
@Output() search: string;
Вы должны привязать его к шаблону компонента поиска
<app-search (search)="searchStr = $event"></app-search>
Вы должны использовать searchStr для фильтрации списка (для этого вы можете написать для него функцию - например, по имени)
get displayList() {
    return this.list.reduce((sum, value) => {
        if (value.name.substring().indexof(this.searchStr.substring()) > -1) {
            sum.push(value);
        }
        return sum;
    }, []);
}
Теперь отобразите список
<ul>
    <li *ngFor="let item of displayList">{{ item.name }}</li>
</ul>

Надеюсь, эта помощь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...