Scilink

  1. Общая информация Название компонента: Научное цитирование Описание: Этот компонент позволяет пользователю вводить текст для поиска научных статей. Результаты поиска отображаются в виде карточек с информацией о статьях, а также в текстовом поле отображается введенный текст.
  2. Структура компонента Компонент состоит из следующих основных частей:

ion-header: Заголовок приложения с названием "Научное цитирование". ion-content: Основное содержимое компонента, включая поле ввода, кнопку поиска и область для отображения результатов. 3. Использование Импорт компонента: Убедитесь, что вы импортировали необходимые модули Ionic в ваш модуль приложения.

Пример использования в шаблоне:

HTML копия 4. Элементы интерфейса ion-header:

Содержит заголовок приложения, оформленный с помощью ion-toolbar и ion-title. ion-content:

Основная область компонента, содержащая элементы управления и результаты поиска. Поле ввода (ion-input):

Позволяет пользователю вводить текст для поиска. Событие (keyup.enter) привязано к методу search_btn(), что позволяет выполнять поиск по нажатию клавиши Enter. Кнопка поиска (ion-button):

Кнопка с текстом "Поиск", которая вызывает метод search_btn() при нажатии. Текстовое поле (ion-textarea):

Отображает результат поиска (введенный текст) в режиме только для чтения. Карточки статей (ion-card):

Отображаются, если массив filtered_articles содержит элементы. Каждая карточка содержит изображение, заголовок статьи (ссылка на DOI), аннотацию и авторов. Сообщение об отсутствии результатов:

Отображается, если массив filtered_articles пуст, с помощью ng-template. 5. Входные параметры filtered_articles:

Массив статей, которые будут отображаться в карточках. Каждая статья должна содержать следующие свойства: img_name: URL изображения статьи. doi: DOI статьи (ссылка). a_name: Название статьи. abstract: Аннотация статьи. a_authors: Авторы статьи. Result:

Строка, содержащая текст, введенный пользователем. Отображается в текстовом поле. 6. Методы search_btn(): Описание: Метод, который вызывается при нажатии на кнопку "Поиск" или при нажатии клавиши Enter. Он обрабатывает введенный текст, обновляет переменную Result и фильтрует статьи, обновляя массив filtered_articles. 7. Примечания Убедитесь, что стили для классов input-container, full-width-input, center-button, cards-container, article-card, logo и no-results-message определены для корректного отображения компонента. Компонент должен быть интегрирован в родительский компонент или модуль, чтобы получать данные о статьях и обрабатывать события. Документация для компонента ScilinkComponent

  1. Общая информация Название компонента: ScilinkComponent Описание: Этот компонент отвечает за получение и отображение списка научных статей. Пользователь может вводить текст для поиска статей, и компонент будет фильтровать результаты на основе введенного текста.
  2. Импортируемые модули HttpClient: Используется для выполнения HTTP-запросов к API и получения данных о статьях. IonicModule: Модуль Ionic, необходимый для использования компонентов Ionic. CommonModule: Общий модуль Angular, который предоставляет общие директивы и пайпы. DataService: Пользовательский сервис, который предоставляет метод для получения данных о статьях.
  3. Интерфейс Article TypeScript interface Article { doi: string; // DOI статьи a_name: string; // Название статьи a_authors: string; // Авторы статьи abstract: string; // Аннотация статьи img_name: string; // URL изображения статьи }
  4. Структура компонента Декоратор @Component: standalone: true: Указывает, что компонент является самостоятельным и не требует родительского модуля. selector: 'app-scilink': Используется для включения компонента в шаблоны. templateUrl: Путь к HTML-шаблону компонента. styleUrls: Путь к стилям компонента.
  5. Свойства класса articles_cards:

Массив объектов типа Article, который хранит все загруженные статьи. filtered_articles:

Массив объектов типа Article, который хранит отфильтрованные статьи на основе пользовательского ввода. searchText:

Строка, которая хранит текст, введенный пользователем для поиска. Result:

Строка, которая отображает сообщение о поиске, основанное на пользовательском вводе. 6. Методы класса constructor(private http: HttpClient, private data: DataService):

Конструктор класса, который инициализирует HttpClient и DataService. ngOnInit():

Метод жизненного цикла Angular, который вызывается при инициализации компонента. Он загружает данные о статьях через DataService и сохраняет их в articles_cards и filtered_articles. search_btn():

Описание: Метод, который вызывается при нажатии кнопки поиска или нажатии клавиши Enter. Он обрабатывает введенный текст, обновляет переменную Result и фильтрует статьи. Логика: Получает значение из поля ввода (ion-input). Если значение введено, фильтрует массив articles_cards по названию статьи (a_name), игнорируя регистр. Обновляет filtered_articles и Result с текстом поиска. Если значение не введено, сбрасывает searchText, восстанавливает все статьи и обновляет Result с сообщением о необходимости ввода текста. 7. Примечания Убедитесь, что DataService реализует метод getData(), который возвращает Observable с данными о статьях. Компонент должен быть интегрирован в родительский компонент или модуль, чтобы корректно отображать данные и обрабатывать события.