这是父组件:我将所有数据从 parentComponent 传递到主页组件。
import { Component, OnInit } from '@angular/core';
import { Product } from '../Model/Product';
import { ProductService } from '../ProductsService/product.service';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css'],
})
export class ParentComponent implements OnInit {
products: Product[] = [];
cartList: Product[] = [];
constructor(private productService: ProductService) {
this.products = this.productService.getProducts();
}
ngOnInit(): void {}
addCart(product: Product) {
this.cartList.push(product);
}
}
(模板)
<app-main-page [products]="products" (addCart)="addCart($event)"></app-main-page>
<app-cart-list [cartList]="cartList"></app-cart-list>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../../ProductsService/product.service';
import { Product } from '../../Model/Product';
@Component({
selector: 'app-main-page',
templateUrl: './main-page.component.html',
styleUrls: ['./main-page.component.css'],
})
export class MainPageComponent {
@Input() products: Product[] = [];
@Output() addCart: EventEmitter<Product> = new EventEmitter();
constructor(private productService: ProductService) {
this.products = this.productService.getProducts();
}
addToCartList(product: Product) {
this.addCart.emit(product);
console.log(product);
}
}
(模板) 正如您所注意到的，有一个单击按钮，我在其中将此方法发送给父组件，以便我可以将其值传递给另一个子组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section>
<div class="products">
<ul *ngFor="let product of products">
<img src="{{ product.img }}" alt="store pictures" />
<li>{{ product.name }}</li>
<li>{{ product.type }}</li>
<li>{{ product.available }}</li>
<li>{{ product.price }}</li>
<button (click)="addToCartList(product)">Add to Cart</button>
</ul>
</div>
</section>
</body>
</html>
import { Component, Input, OnInit } from '@angular/core';
import { Product } from 'src/app/Model/Product';
@Component({
selector: 'app-cart-list',
templateUrl: './cart-list.component.html',
styleUrls: ['./cart-list.component.css'],
})
export class CartListComponent implements OnInit {
constructor() {
console.log(this.cartList);
}
@Input() cartList: Product[] = [];
ngOnInit(): void {}
}
我不能在 cartList 中使用任何值，为什么？
最佳答案
输入变量、事件发射器和 RxJS 只会使问题复杂化。您只需要一个简单的 Angular 服务。
这是一个 stackblitz:https://stackblitz.com/edit/angular-ivy-a6ub1h?file=src/app/app.component.html
你的父组件不需要任何 typescript，它需要做的就是通过 html 实例化其他组件:
父组件
<app-main-page></app-main-page>
<app-cart-list></app-cart-list>
我将制作一个产品服务来模拟您的应用程序，但我不确定您的服务到底是什么样子。为简单起见，产品将只有一个名称。
产品服务
export type Product = {
name: string;
};
@Injectable({ providedIn: 'root' })
export class ProductService {
getProducts(): Product[] {
return [
{ name: 'product1' },
{ name: 'product2' },
{ name: 'product3' },
{ name: 'product4' },
{ name: 'product5' },
{ name: 'product6' },
{ name: 'product7' },
{ name: 'product8' },
];
}
}
我将提供一项服务来保存购物车列表项，我们将具有添加和删除功能。
购物车服务
@Injectable({ providedIn: 'root' })
export class CartService {
cartList: Product[] = [];
addToCart(product: Product) {
this.cartList.push(product);
}
deleteFromCart(index: number) {
this.cartList.splice(index, 1);
}
}
主页只获取产品并可以将它们添加到购物车。
主页
export class MainPageComponent implements OnInit {
products: Product[] = [];
constructor(
private prodService: ProductService,
private cartService: CartService
) {}
ngOnInit() {
this.products = this.prodService.getProducts();
}
addToCart(product: Product) {
this.cartService.addToCart(product);
}
}
<h1>Main Page</h1>
<ng-container *ngFor="let product of products">
<span>{{ product.name }} </span>
<button (click)="addToCart(product)">Add to Cart</button>
<br />
</ng-container>
购物车组件显示购物车商品并可以删除它们
购物车列表
export class CartListComponent {
constructor(private cartService: CartService) {}
get cartList() {
return this.cartService.cartList;
}
delete(index: number) {
this.cartService.deleteFromCart(index);
}
}
<h1>Cart</h1>
<ng-container *ngFor="let product of cartList; index as i">
<span>{{ product.name }} </span>
<button (click)="delete(i)">Delete</button>
<br />
</ng-container>
关于angular - 我想将一个对象传递给子组件。我做了一切，但没有任何效果。 ( Angular )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72639215/