[英]How to pass value from one component to another? (Angular)
I just recently started learning Angular and I have a question.最近刚开始学习 Angular 有一个疑问。 I want to implement a search method to search for a product on my site, I made search.pipe.ts, which works, but the input for input is in the header.component.ts component, and the products array is in the car-list.component.ts component.我想实现一个搜索方法来在我的网站上搜索产品,我做了 search.pipe.ts,它有效,但是输入的输入在 header.component.ts 组件中,产品数组在汽车中-list.component.ts 组件。
<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>
<form class="d-flex me-5">
<input type="text" class="form-control me-2" placeholder="Search cars...">
</form>
export class HeaderComponent implements OnInit {
searchStr: string = '';
constructor() {
}
ngOnInit(): void {
}
}
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(cars: any[], value: any) {
return cars.filter(car => {
return car.name.includes(value);
})
}
}
I want the input values from the header component to be passed to the car-list component so that I can find the product I need.我希望将来自 header 组件的输入值传递给汽车列表组件,以便我可以找到我需要的产品。
In this case you can use a shared service where you can pass data from your header component and load that data in your products component.在这种情况下,您可以使用共享服务,您可以在其中传递来自 header 组件的数据并将该数据加载到产品组件中。 For further reference - Angular 4 pass data between 2 not related components供进一步参考 - Angular 4 在 2 个不相关的组件之间传递数据
use @Input
and @Output
decorators to communicate between components使用@Input
和@Output
装饰器在组件之间进行通信
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.