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，晚安，拜拜~