Angular学习笔记：定义项目根目录，条件渲染和循环渲染

本文是自己的学习笔记，主要参考资料如下。

- B站《2020最新Angular实战教程》，老陈打码制作，https://www.bilibili.com/video/BV1i741157Fj?p=2。

---

1、定义项目的根页面

我们新建一个Angular项目，通常会有一个app.module.ts文件，我们可以在里面设置根目录。该文件的内容一般如下

其中的NewComponent是我自己定义的一个组件。

默认情况下，项目是将AppComponent作为项目的根页面，其对应的ts文件内容如下所示，就是一个简单的Hello World，项目的首页就只有这段话。

下面我们来修改首页指向的组件。

1.1、修改app.module.ts

了解组件知识的都应该知道，我们要先将app.module.ts中的bootstrap修改成我们希望的组件名。我修改成NewComponent

NewComponet的html内容如下，也很简单，就只有一个标题叫New York。

NewComponent的ts内容如下，selector是app-new

1.2、修改index.html

在index.html中，挂载新组件。

修改成功

---

2、条件渲染和循环渲染

2.1、*ngIf

2.1.1、条件渲染示例

条件渲染可以看成是一个if语句，通过一些条件判断，来决定某些元素是否显示或者显示什么内容，样式等等。

我们可以在对应元素中将*ngIf当成是这个元素的一个普通属性，在属性中写入表达式判断是非来决定元素是否显示或者样式是否应用。

条件渲染的示例如下

<div *ngIf="expression">
	div1
</div>
<div *ngIf="expression == true">
	div2
</div>
<div *ngIf="expression == false">
	div3
</div>

其中，expression是ts中定义的一个变量

export AppComponent{
	expression = true;
}

最后页面显示如下

在条件渲染的表达式中，可以直接使用ts中定义的变量和函数。

2.1.2、条件渲染的注意事项

使用<div *ngIf="expression"></div这样的语句时要注意，如果expresion的值切换比较频繁的话，不要用这种方法来决定元素是否展示。因为这种方法实际上是将元素不断地从DOM中删除和新增并且重新渲染，非常消耗性能。建议用下面的方式来实现。

<div [style.display]="express?'block':'none'"></div>

这样当expression为true时，显示div；为false，不显示div。

2.2、*ngFor

2.2.1、获取元素值

循环渲染实际上就是循环集合。使用*ngFor="let item of collecitonName"来遍历。这个表达式比较像For循环。item是对集合的变量命名。

比如我们定义一个数组

export AppComponent{
	arr=["option1", "option2", "option3"];
}

之后循环这个数组

<ul>
	<li *ngFor="let item of arr">{{item}}</li>
</ul>

最后展示如下

2.2.2、获取索引值

*ngFor="let item of collecitonName;let i = index"，其中的I就是索引值，可以随便命名。

比如下面的例子

<ul>
	<li *ngFor="let item of arr;let i=index">{{i}}</li>
</ul>

2.2.3、给每个元素指定事件

在*ngFor="let item of collecitonName;let i = index"中，实际上就定义了item和i来代表集合中的元素，我们可以在事件中直接将这两个值传入事件的函数中。

<ul>
	<li *ngFor="let item of arr;let i=index" (click)="clickMethod(item, i)">{{i}}</li>
</ul>

2.3、*ngSwitch

顾名思义，就是switch语句，示例如下。

要注意是[ngSwitch]不是*ngSwitch

<div [ngSwitch]="situation">
  <div *ngSwitchCase=1>
    1
  </div>
  <div *ngSwitchCase=2>
    2
  </div>
  <div *ngSwitchDefault>
    default
  </div>
</div>