学会 Angular7--- (二) 模板语法，组件，输入输出

一. 模板语法

1. *ngFor

---

*ngFor 是一个 "结构型指令"。结构型指令会通过添加、删除和操纵它们的宿主元素等方式塑造或重塑 DOM 的结构。任何带有 * 的指令都是结构型指令。

1. *ngFor 用于数组遍历
*ngFor 会导致
   被列表中的每个商品都重复渲染一次。
2. 语法举例：

2. 插值语法 {{}}

---

Interpolation {{ }}

1. 插值会把属性的值作为文本渲染出来
2. 语法举例： {{product.name}}

3. 属性绑定语法 [ ]

---

Property binding [ ]

1. 属性绑定语法 [ ] 允许你在模板表达式中使用属性值。
2. 语法举例：

4. *ngIf

---

1. *ngIf 表示条件
2. 语法举例：

5. 添加按钮 button 事件绑定( )

---

Event bingding()

1. 把 button 的 click 事件绑定到我们替你定义好的 share() 事件上
2. 语法举例：

Products

  

    {{product.name}}

{{product.price}}
  

  Description: {{product.description}}


  Share

详细的Angular 模板语法指南：
https://www.angular.cn/guide/template-syntax

二. 组件

Angular 应用程序由一棵组件树组成，每个 Angular 组件都有一个明确的用途和责任。

1. 组件组成

• 组件类 class xxxComponent
  • typescript 文件
  • 它用来处理数据和功能
• HTML 模板
  • html 文件
  • 它决定了用户的呈现方式
• CSS 样式
  • css 文件
  • 组件专属的样式定义了外观和感觉

2. 基础组件 app-root

1. 是应用的外壳
2. 要加载的第一个组件
3. 所有其他组件的父组件，类似于基础页面

三. 输入输出

1. 输入

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

1. Input 一个装饰器，用来把某个类字段标记为输入属性，并提供配置元数据。该输入属性会绑定到模板中的某个DOM 属性。当检测到变化时，Angular 会自动使用这个DOM 属性的值来更新此数据属性。
   Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template.During change detection, Angular automatically updates the data property with the DOM property's value.
2. 语法： @Input() bindingPropertyName: string
   bindingPropertyName : the name of the DOM property to which the input property is bound.
3. 使用方法：
   @Input () bankName: string;
@Input('account-id') id:string

2. 输出

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

1. 一个装饰器，用于把一个类字段标记为输出属性，并提供配置元数据。 凡是绑定到输出属性上的 DOM 属性，Angular 在变更检测期间都会自动进行更新。
   Decorator that marks a class field as an output property and supplies configuration metadata. The DOM property bound to the output property is automatically updated during change detection.
   @Output() notify = new EventEmitter(); //实例化一个notify 属性

3. EventEmitter

import { EventEmitter } from '@angular/core';
有 2 种 methods: emit() 和 subscribe()

• emit() Emits an event containing a given value.
• subscribe() Registers handlers for events emitted by this instance.
  Notify Me // 用事件绑定更新"Notify me"
  用于发送传统事件，并为这些事件注册处理器。
  Use in directives and components to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.

1. 创建一个用于提醒的组件 product-alerts

src/app/product-alerts/product-alerts.component.ts

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

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent  {
@Input product ;
@Output notify = new EventEmitter();

}

src/app/product-alerts/product-alerts.component.html

 Notify Me  

2. 将组件 product-alerts显示为商品列表product-list 的一部分(即 作为product-list 的子组件)，通过属性绑定把当前商品作为输入传递给组件。

src/app/product-list/product-list.component.html

3. 定义单击该按钮时应该发生的行为

src/app/product-list/product-list.component.ts

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');
  }
}

4. 接收product-alert 组件输出来更新 product-list 组件,将product-alert 组件的notify事件绑定到product-list 组件的方法 onNotify()

src/app/product-list/product-list.component.html