如何将值从一个组件传递到另一个组件？(角)

Question

我最近刚开始学习角质，我有一个问题。我想实现一种搜索方法，在我的站点上搜索产品，我创建了search.pipe.ts，但是输入的输入在header.component.ts组件中，而products数组在car-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 {
  }

}

search.pipe.ts

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

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

我希望将标题组件中的输入值​​传递给汽车列表组件，这样我就可以找到我需要的产品。

Answer 1

在这种情况下，您可以使用共享服务，在该服务中可以从标头组件传递数据并在产品组件中加载该数据。供进一步参考- Angular 4 pass data between 2 not related components

Answer 2

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