Использование компонентов Angular с использованием TypeScript

Ситуация:

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

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

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

Вопрос:

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

Использование компонентов Angular с использованием TypeScript

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

Посмотрите этот живой пример: stackblitz.com/edit/…

— 11.02.2019 11:05

@JacopoSciampi - Отличный материал!

— 11.02.2019 11:33

Надеюсь, это помогло вам.

— 12.02.2019 10:45

angular typescript parent-child angular-components

11.02.2019 10:52

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Ответы 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>

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

11.02.2019 11:06

Другие вопросы по теме

Angular sidenav по умолчанию не выбран при начальной загрузке

Как использовать «setFont» в jsPDF с UTF-8?

Как получить данные из динамического значения пары ключей в Angular

Свойство параметра разрешено только в реализации конструктора

Компонент Typescript React получает возвращаемое значение

Виртуальная прокрутка для angular без добавления данных в список

Как завершить обработку посылки/бабеля/машинописного текста из-за сложных ошибок/предупреждений?

Загрузите файл Excel с именем файла как есть в Angular

Невозможно установить свойство «текст» неопределенного

Не отображать вложенные значения в приложении Angular

Использование компонентов Angular с использованием TypeScript

Ответы 1

Другие вопросы по теме

Похожие вопросы