Angular4.x學習之路分享【2】--項目的目錄結構說明及相關指令使用

小夥伴們，你們好啊，今天分享angular4.x的項目目錄結構以及經常使用指令的使用，好了，廢話很少說，上乾貨！

1.目錄結構分析：（媽哎，圖標的好累啊~）

2.組件的分析以及建立

1、建立指令：

ng g component + 組件名

2、經常使用的指令說明：
1.插值表達式{{}}--文本綁定
例如：

{{title}}

2.HTML綁定
例如：

<div [innerHTML]="xxx"></div>

3.數據循環：

3.1.寫法一：

<ul>
<li *ngFor="let 變量名 of list">
</li>
</ul>

若是想要得到下標值，能夠這樣：

<ul>
<li *ngFor="let 變量名 of list; let i = index">
        {{i}}
</li>
</ul>

3.2.寫法二：

<ul>
<li template="ngFor let 變量名 of list">
</li>
</ul>

4.條件判斷*ngIf:
寫法一：

<p *ngIf="list.length < 5">顯示的條件</p>

寫法二：

<p template="ngIf list.length < 5">顯示的條件</p>

5.事件的執行：

<button (click)="方法名（）"></button>

6.屬性的綁定：

[xxx]="xxxx"

7.雙向數據綁定：

<input [(ngModel)]="value">
        {{value}}

重點：必定要在項目中引入FormsModule模塊

結尾：好了，本章就分享這麼多，下期分享Angular4中的服務service，晚安，拜拜~