每當我單擊它時，我都會創建一個按鈕，它將所有值傳遞給這個空物件“產品”。我正在嘗試將此物件發射到子組件，因此我可以將其推入產品空陣列中。
import { Component, Input } from '@angular/core';
import { Item } from 'src/app/Model/Item';
import { EventEmitter } from '@angular/core';
@Component({
selector: 'app-item',
templateUrl: './item.component.html',
styleUrls: ['./item.component.css']
})
export class ItemComponent {
items: Item[] = []
@Input() addProduct: EventEmitter<Item> = new EventEmitter
constructor(private storeService: StoreService) {
this.items = this.storeService.getItem()
}
addProducts(item: Item) {
const product = {
id: item.id,
img: item.img,
name: item.name,
type: item.type,
price: item.price,
available: item.available
}
console.log(product)
this.addProduct.emit(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 >
<ul *ngFor="let item of items">
<img [routerLink]="['/product', item.id]" src = {{item.img}} alt="有沒有辦法使用 emit 將物件傳遞給子組件？（角度）"/>
<li >{{item.name}}</li>
<li>{{item.type}}</li>
<li>{{item.available}}</li>
<li>{{item.price}}</li>
<button (click)="addProducts(item)">Add to Cart</button>
</ul>
</div>
</section>
</body>
</html>
--
// 另一個組件（子）
import { Component, OnInit } from '@angular/core';
import { Item } from 'src/app/Model/Item';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
product: Item[] = []
ngOnInit(): void {
}
addProduct(post: Item){
this.product.push(post)
}
}
-- 這是我在子模板中所做的。
<app-cart (addProduct)="addProduct($event)"></app-cart>
它給我一個錯誤說，“'Event'型別的引數不能分配給'Item'型別的引數。'Event'型別缺少'Item'型別的以下屬性：id，img，name，price，availablengtsc（第2345章
uj5u.com熱心網友回復：
如果您想了解 Angular 中的作業原理，我建議您遵循Angular 教程。
但這里有一個簡單的示例，說明如何在組件之間進行通信。
專案串列組件
@Component({
selector: 'app-items-list',
templateUrl: './app-items-list.component.html',
styleUrls: ['./app-items-list.component.css']
})
export class ItemsListComponent {
@Input() items: Item[] = [];
@Output() addProduct = new EventEmitter<Item>();
addProducts(item: Item) {
this.addProduct.emit(item);
}
}
您不需要在主 HTML 檔案 index.html 之外添加初始 HTML 標記
<div class="products">
<ul *ngFor="let item of items">
<img [routerLink]="['/product', item.id]" [src]="item.img" alt="store pictures" />
<li>{{ item.name }}</li>
<li>{{ item.type }}</li>
<li>{{ item.available }}</li>
<li>{{ item.price }}</li>
<button (click)="addProducts(item)">Add to Cart</button>
</ul>
</div>
購物車組件
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent {
@Input() products: Item[] = [];
addProduct(product: Item) {
this.products.push(product);
}
}
父組件（負責處理業務邏輯）
@Component({
selector: 'app-root',
template: `
<app-items-list [items]="items" (addProduct)="addProduct($event)"></app-items-list>
<app-card [products]="cartProducts"></app-card>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
readonly items = this.storeService.getItems();
cartProducts: Item[] = [];
constructor(private storeService: StoreService) {}
addProduct(product: Item) {
this.cartProducts.push(product);
}
}
您的專案串列和購物車組件是啞組件，這意味著它們不知道資料來自哪里，它們應該保持這種狀態（啞組件也是可重用組件）。這就是父組件的作用。
父級通過服務獲取資料并通過輸入將其傳遞給專案串列組件。當Add Product單擊按鈕時，專案串列組件會發出一個事件并將結果發送給父級。父級負責將選定的產品分發到購物車組件。
uj5u.com熱心網友回復：
最通用的跨組件解決方案是使用Subject。首先創建一個將用于通信的服務 ( ng g service foo)。然后在服務上創建新主題：
addProductSub = new Subject;
將此新服務匯入父組件和子組件。要發出，只需在您的主題上呼叫 next 方法并將您希望發送的內容作為引數傳遞：
this.importedService.addProductSub.next(product)
在子組件上，訂閱主題并描述收到新資料時要做什么。
this.importedService.addProductSub.subscribe((data) => { this.productEmptyArray = data; })
為了防止記憶體泄漏，將訂閱（子組件）分配給變數并呼叫.unsubscribe()生命ngOnDestroy周期掛鉤
uj5u.com熱心網友回復：
您不能從父組件向其子組件發出值。你可以做的是：
- 使用 an
@Input()將資料從父級傳遞給子級 - 使用 an
@Output()將資料從子級發送到父級
這是一個StackBlitz 演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491835.html
標籤：有角度的