如何将值从一个组件传递到另一个组件？ （有角度的）

Question

最近刚开始学习 Angular 有一个疑问。 我想实现一个搜索方法来在我的网站上搜索产品，我做了 search.pipe.ts，它有效，但是输入的输入在 header.component.ts 组件中，产品数组在汽车中-list.component.ts 组件。

car-list.component.html

<div *ngFor="let car of cars | paginate: { itemsPerPage: pageNumber, currentPage: currentPg} | **search:searchStr**" class="col-md-3">

  <div class="product box">

    <img src="{{'data:image/jpg;base64,' + car.image }}" alt="">
    <h3>{{ car.name }}</h3>
    <div class="price">{{ car.price | currency:'USD' }}</div>
    <button class="btn btn-primary btn-sm">Add to cart</button> <!--(click)="addToCart(tempProduct)"-->
  </div>
  <br>
</div>

header.component.html

<form class="d-flex me-5">
    <input type="text" class="form-control me-2" placeholder="Search cars...">
</form>

header.component.ts

export class HeaderComponent implements OnInit {
  searchStr: string = '';

  constructor() {
  }

  ngOnInit(): void {
  }

}

搜索.pipe.ts

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(cars: any[], value: any) {
    return cars.filter(car => {
      return car.name.includes(value);
    })
  }
}

我希望将来自 header 组件的输入值传递给汽车列表组件，以便我可以找到我需要的产品。

Answer 1

在这种情况下，您可以使用共享服务，您可以在其中传递来自 header 组件的数据并将该数据加载到产品组件中。 供进一步参考 - Angular 4 在 2 个不相关的组件之间传递数据

Answer 2

使用@Input和@Output装饰器在组件之间进行通信