Angular 11 组件类和模板的交互及通信

多看官网：https://angular.cn/start

目录结构：

打开 product-alerts.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  // @Component表明下面的类是一个组件
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
// 导出用于处理该功能组件
export class ProductAlertsComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}

从 @angular/core 导入 Input。

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';

在 ProductAlertsComponent 类的定义中，定义一个带 @Input() 装饰器的 product 属性。@Input() 装饰器指出其属性值是从该组件的父组件商品列表组件中传入的。

export class ProductAlertsComponent implements OnInit {
  @Input() product;
  constructor() { }

  ngOnInit() {
  }

}

打开 product-alerts.component.html

把作为占位符的 p 替换为如果商品价格超过 700 美元就要显示出来的“通知我”按钮。

<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>

打开 product-list.component.html

通过属性绑定把当前商品作为输入传给组件。

<button (click)="share()">
  Share
</button>

//通过绑定的属性把超过700美金的商品下提示Notify Me
<app-product-alerts
  [product]="product">
</app-product-alerts>

当用户点击 “Notify Me” 时，产品提醒组件发出一个事件，商品列表组件对这个事件进行响应；

打开 product-alerts.component.ts

从 @angular/core 中导入 Output 和 EventEmitter

import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';

组件类中

在组件类中，用 @Output() 装饰器和一个事件发射器 EventEmitter() 实例定义一个名为 notify 的属性。这可以让商品提醒组件在 notify 属性发生变化时发出事件。

export class ProductAlertsComponent {
  @Input() product;
  @Output() notify = new EventEmitter();
}

打开product-alerts.component.html

product-alerts.component.html中，用事件绑定更新“Notify Me”按钮，以调用 notify.emit() 方法。

<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

点击按钮父组件采取行动

定义当用户单击该按钮时应该发生的行为。回想一下，应该由父组件（商品列表组件）采取行动，而不是商品提醒组件。在 product-list.component.ts 文件中，定义一个 onNotify() 方法，类似于 share() 方法：

export class ProductListComponent {
  products = products;

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

  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }
}

在product-list.component.html

在 product-list.component.html 中，把 app-product-alerts 组件（就是它显示的“Notify Me”按钮）的 notify 事件绑定到商品列表组件的 onNotify() 方法。

<button (click)="share()">
  Share
</button>
//通过绑定的属性把超过700美金的商品下提示Notify Me
<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>