时间戳

首页 > 解决方案 > 在 Angular 中重写 javascript 项目

javascript - 在 Angular 中重写 javascript 项目

问题描述

我是新的 Web 开发人员，并想通过在 Angular 中创建一个简单的 javascript 项目来学习 Angular。这是一个使用 MVC 模式在 javascript 中开发的 udemy 项目 在此处输入图像描述

这里项目分为三个部分：

搜索食谱购物清单

一旦用户在搜索栏中输入一些文本并按搜索，数据将填充在左侧，如图所示。

我在 Angular 中创建了两个组件，一个是 SearchComponent，另一个是结果组件。我在正文中的标题和结果组件中保留了搜索。我创建了一个名为 Recipe 的服务类，以使用 HTTPClient 从 API 获取数据。

当我按下搜索按钮并将数据保存在 Recipes 变量中时，我正在调用 API，但是如何在 resultcomponent 中传递该数据。

我有基本的疑问当我们不路由到另一个页面时创建两个组件是否正确？

处理这种情况的正确方法是什么，因为我们没有导航如何在服务具有带有数据的 Recipe 变量时填充结果组件？

感谢和问候，

纳加斯里。

标签： javascriptangular

解决方案

将结果存储在服务中作为可观察对象：

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

    constructor(private http: HttpClient) {}

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

从您的搜索组件调用该服务以填充 observable 的结果：

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”&gt;{{ result.name }} </li>'
})
export class ResultsComponent {
    constructor(private recipeService: RecipeService) {}
}

Stackblitz 上面显示：https ://stackblitz.com/edit/so-recipes?file=src%2Fapp%2Fresults.component.ts

查看屏幕截图，我将使用至少 3 个组件：

  • 搜索栏
  • 结果
  • 选定的食谱

推荐阅读