Блог

Я новичок в веб-разработке и подумал об изучении Angular, создав простой проект javascript на Angular. Это проект udemy, разработанный на javascript с использованием шаблона MVC

Здесь проект разделен на 3 части :

Поиск по списку покупок рецептов

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

Я создал два компонента в Angular, один из которых — SearchComponent, а другой — result component. Я сохранил поиск в заголовке и компоненте результата в теле.Я создал один класс сервиса с именем Recipe для получения данных из API с использованием HttpClient.

Я вызываю API, когда нажимаю кнопку поиска и сохраняю данные в переменной Recipes, но как передать эти данные в resultcomponent.

У меня есть основные сомнения, правильно ли создавать два компонента, когда мы не перенаправляем на другую страницу?

Каков правильный способ справиться с этим сценарием, поскольку мы не понимаем, как я могу заполнить результирующий компонент, как только у службы есть переменная рецепта с данными?

Спасибо и с уважением,

Нагасри.

Сохраните ваши результаты внутри сервиса как наблюдаемый:

 export class RecipeService{
    results$: Observable<Result[]>;

    constructor(private http: HttpClient) {}

    search(value:string){
         this.results$ = this.http.get<Result[]>(...value...);
    }
}
  

Вызовите службу из вашего поискового компонента, чтобы заполнить наблюдаемые результаты:

 export class SearchComponent {
    constructor(private recipeService: RecipeService) {}

    // call from button in template
    search(value:string){
        this.recipeService.search(value);
     }
}
  

Получите доступ к результатам, наблюдаемым из вашего компонента результатов, и используйте асинхронный канал для обработки подписки / отмены подписки:

 @Component({
  selector: 'app-results',
  template: '<li *ngFor=“let result of recipeService.results$ | async”>{{ result.name }} </li>'
})
export class ResultsComponent {
    constructor(private recipeService: RecipeService) {}
}
  

Stackblitz, показанный выше: https://stackblitz.com/edit/so-recipes?file=src/app/results.component.ts

Глядя на скриншот, я бы использовал как минимум 3 компонента:

• панель поиска
• Результаты
• выбранный рецепт