Angular4.x学习之路分享【2】--项目的目录结构说明及相关指令使

小伙伴们，大家好啊，今天分享angular4.x的项目目录结构以及常用指令的使用，好了，废话不多说，上干货！

1.目录结构分析：（妈哎，图标的好累啊~）

2.组件的分析以及创建

一、创建指令：

ng g component + 组件名

二、常用的指令说明：
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，晚安，拜拜~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!