一. 模板語(yǔ)法
1. *ngFor
*ngFor 是一個(gè) "結(jié)構(gòu)型指令"拖云。結(jié)構(gòu)型指令會(huì)通過(guò)添加、刪除和操縱它們的宿主元素等方式塑造或重塑 DOM 的結(jié)構(gòu)应又。任何帶有 * 的指令都是結(jié)構(gòu)型指令宙项。
-
*ngFor 用于數(shù)組遍歷
*ngFor會(huì)導(dǎo)致<div>被列表中的每個(gè)商品都重復(fù)渲染一次。 - 語(yǔ)法舉例：
<div *ngFor="let product of products"> </div>
2. 插值語(yǔ)法 {{}}
Interpolation {{ }}
-
插值會(huì)把屬性的值作為文本渲染出來(lái) - 語(yǔ)法舉例：
{{product.name}}
3. 屬性綁定語(yǔ)法 [ ]
Property binding [ ]
-
屬性綁定語(yǔ)法 [ ]允許你在模板表達(dá)式中使用屬性值株扛。 - 語(yǔ)法舉例：
<a [title]="product.name + ' details'">
4. *ngIf
-
*ngIf表示條件 - 語(yǔ)法舉例：
<p *ngIf="product.description">
5. 添加按鈕 button 事件綁定( )
Event bingding()
- 把 button 的 click 事件綁定到我們替你定義好的 share() 事件上
- 語(yǔ)法舉例：
<button (click)="share()">
<h2>Products</h2>
<div *ngFor = "let product of products">
<h3>
<a [title]="product.name + 'details'">{{product.name}}
</a>
{{product.price}}
</h3>
<p *ngIf ="product.description">
Description: {{product.description}}
</p>
<button (click)="share()">
Share
</button>
</div>
詳細(xì)的Angular 模板語(yǔ)法指南：
https://www.angular.cn/guide/template-syntax
二. 組件
Angular 應(yīng)用程序由一棵組件樹(shù)組成尤筐，每個(gè) Angular 組件都有一個(gè)明確的用途和責(zé)任汇荐。
1. 組件組成
- 組件類(lèi) class xxxComponent
- typescript 文件
- 它用來(lái)處理數(shù)據(jù)和功能
- HTML 模板
- html 文件
- 它決定了用戶(hù)的呈現(xiàn)方式
- CSS 樣式
- css 文件
- 組件專(zhuān)屬的樣式定義了外觀和感覺(jué)
2. 基礎(chǔ)組件 app-root
- 是應(yīng)用的外殼
- 要加載的第一個(gè)組件
- 所有其他組件的父組件，類(lèi)似于基礎(chǔ)頁(yè)面
三. 輸入輸出
1. 輸入
import { Input } from '@angular/core';
- Input 一個(gè)裝飾器盆繁，用來(lái)把某個(gè)類(lèi)字段標(biāo)記為輸入屬性掀淘，并提供配置元數(shù)據(jù)。該輸入屬性會(huì)綁定到模板中的某個(gè)DOM 屬性油昂。當(dāng)檢測(cè)到變化時(shí)革娄，Angular 會(huì)自動(dòng)使用這個(gè)DOM 屬性的值來(lái)更新此數(shù)據(jù)屬性。
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. - 語(yǔ)法：
@Input() bindingPropertyName: string
bindingPropertyName : the name of the DOM property to which the input property is bound. - 使用方法：
@Input () bankName: string;
@Input('account-id') id:string
2. 輸出
import { Output } from '@angular/core';
- 一個(gè)裝飾器冕碟，用于把一個(gè)類(lèi)字段標(biāo)記為輸出屬性拦惋，并提供配置元數(shù)據(jù)。 凡是綁定到輸出屬性上的 DOM 屬性安寺，Angular 在變更檢測(cè)期間都會(huì)自動(dòng)進(jìn)行更新厕妖。
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();//實(shí)例化一個(gè)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.
<button (click)="notify.emit()">Notify Me</button>// 用事件綁定更新"Notify me"
用于發(fā)送傳統(tǒng)事件，并為這些事件注冊(cè)處理器挑庶。
Use in directives and components to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.
1. 創(chuàng)建一個(gè)用于提醒的組件 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
<p *ngIf]="product.price > 700"> <button>Notify Me</button> </p>
2. 將組件 product-alerts顯示為商品列表product-list 的一部分(即 作為product-list 的子組件)叹放，通過(guò)屬性綁定把當(dāng)前商品作為輸入傳遞給組件。
src/app/product-list/product-list.component.html
<app-product-alerts
[product]="product">
</app-product-alerts>
3. 定義單擊該按鈕時(shí)應(yīng)該發(fā)生的行為
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 組件輸出來(lái)更新 product-list 組件,將product-alert 組件的notify事件綁定到product-list 組件的方法 onNotify()
src/app/product-list/product-list.component.html
<app-product-alerts
[product]="product"
(notify)="onNotify()">
</app-product-alerts>
