Pass data to a child component

The next step is to create a new alert feature that uses product data from the ProductListComponent. The alert checks the product's price, and, if the price is greater than $700, displays a Notify Me button that lets users sign up for notifications when the product goes on sale.

下一步是创建一个新的通知组件，并且使用product-list组件里的数据。如果产品的价格大于700美元，就显示一个Notify Me的按钮。点击这个按钮，可以让用户登录并发送通知。

This section walks you through creating a child component, ProductAlertsComponent, that can receive data from its parent component, ProductListComponent.

接下来，我们创建一个子组件product-alerts，并接收来自其父组件product-list的数据。
运行如下命令来创建product-alerts组件。
```
ng generate component product-alerts
```
To set up ProductAlertsComponent to receive product data, in the ProductAlertsComponent class definition, define a property named product with an @Input() decorator. The @Input() decorator indicates that the property value passes in from the component's parent, ProductListComponent.

为了接收产品数据，在组件product-alerts的类定义里，定义一个@Input()类型的属性。@Input()表示这个属性的值来自于其父组件。
```
export class ProductAlertsComponent {

  @Input() product!: Product;

}
```
Open product-alerts.component.html and replace the placeholder paragraph with a Notify Me button that appears if the product price is over $700.

打开product-alerts组件的HTML文件，添加一个Notify Me的按钮，并且设置条件，当产品价格大于700美元时才会显示这个按钮。
```
<p *ngIf="product && product.price > 700">
  <button type="button">Notify Me</button>
</p>
```
Finally, to display ProductAlertsComponent as a child of ProductListComponent, add the <app-product-alerts> element to product-list.component.html. Pass the current product as input to the component using property binding.

最后，在product-list的HTML文件里添加<app-product-alerts>元素，并把当前产品的数据绑定到子组件的属性上。
```
<button type="button" (click)="share()">
  Share
</button>

<app-product-alerts
  [product]="product">
</app-product-alerts>
```
最终实现的效果如下：

Product Alerts

Pass data to a parent component

To make the Notify Me button work, the child component needs to notify and pass the data to the parent component. The ProductAlertsComponent needs to emit an event when the user clicks Notify Me and the ProductListComponent needs to respond to the event.

如果想让按钮起效，子组件需要通知其父组件，并传递相应的数据。当用户点击按钮时，子组件product-alerts需要发布一个事件，并且父组件需要相应该事件。
In the component class, define a property named notify with an @Output() decorator and an instance of EventEmitter(). Configuring ProductAlertsComponent with an @Output() allows the ProductAlertsComponent to emit an event when the value of the notify property changes.

在组件product-alerts中定义一个@Output()类型的属性，命名为notify，并实例化EventEmitter()。使用@Output()属性配置组件product-alerts，当用户点击按钮时，组件product-alerts发布一个事件。
```
export class ProductAlertsComponent {
  @Input()
  product!: Product;

  @Output()
  notify = new EventEmitter();
}
```
In product-alerts.component.html, update the Notify Me button with an event binding to call the notify.emit() method.

在组件product-alerts的HTML文件里，更新按钮配置，给按钮绑定一个事件，并通过notify.emit()方法发布一个事件。
```
<p *ngIf="product && product.price > 700">
  <button type="button" (click)="notify.emit()">Notify Me</button>
</p>
```
Define the behavior that happens when the user clicks the button. The parent, ProductListComponent —not the ProductAlertsComponent— acts when the child raises the event. In product-list.component.ts, define an onNotify() method, similar to the share() method.

我们需要定义用户点击按钮后的行为。当子组件ProductAlertsComponent触发一个事件后，父组件ProductListComponent需要执行相应的操作。在父组件ProductListComponent的类里定义onNotify()方法。
```
export class ProductListComponent {
  constructor(
    private readonly productsService: ProductsService
  ) {}

  products = this.productsService.getProductList();

  share() {
    alert('The product has been shared!');
  }

  onNotify() {
    alert("This message is from Notify component.");
  }
}
```
Update the ProductListComponent to receive data from the ProductAlertsComponent.

In product-list.component.html, bind to the onNotify() method of the product list component. is what displays the Notify Me button.

绑定方法onNotify()到子组件ProductAlertsComponent的事件触发器notify。
```
<button type="button" (click)="share()">
  Share
</button>

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>
```
Click the Notify Me button to trigger an alert which reads, "This message is from Notify component.".

点击Notify Me按钮，显示Notify信息。

Product Alerts

Angular 入门到精通 #03 - Pass data between parent and child component

Pass data to a child component

Pass data to a parent component