尝试创建一个基本的Angular应用程序 (3)

开始尝试创建一个基本的Angular应用（准备阶段）。

尝试开始创建一个基本的Angular应用程序。

[Angular] 开始尝试基本的Angular应用(2)

我正在尝试进行Angular教程。

将数据传递给子组件

Angular公式网页：将数据传递给子组件

在这个部分，我们将说明如何从父组件 ProductListComponent 接收数据来创建子组件 ProductAlertsComponent。

使用Angular Generator生成一个名为product-alerts的新组件

按照教程的指示，生成 product-alerts 组件。然后，将自动创建以下3个文件。

产品警报组件.ts
产品警报组件.html
产品警报组件.css

首先从 @angular/core 导入 Input

import { Input } from '@angular/core';

在product-alerts.component.ts文件中，添加如上所述的输入引入语句。

使用 `@Input()` 装饰器对属性命名为 `product` 进行定义。

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

  ngOnInit() {
  }

}

我們會加入如下描述：@Input() product;

这个 @Input() 装饰器表示属性的值是从组件的父组件 ProductListComponent 中传递过来的。

在product-alerts.component.html中编写button标签。

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

打开 product-alerts.component.html 文件，并将默认写法改为如上所示。

在product-list.component.html中添加一个选择器

要将 ProductAlertsComponent 显示为 ProductListComponent 的子组件，需要在 product-list.component.html 中添加选择器。

<button (click)="share()">
  Shareボタン
</button>

<app-product-alerts
  [product]="product">
</app-product-alerts>

我正在使用属性绑定。我指的是使用 [] 的方法。

下一篇文章：[Angular] 尝试创建基本的Angular应用（4）将数据传递给父组件