【Angular教程】-组件初识｜8月更文挑战

前提: 准备一个空的angular项目(ng new angular-course)

与Angular组件的第一次会面

1. **通过创建组件命令: ****ng g c components/HelloWorld**来生成我们的第一个组件
2. 观察目录变化,会在src/app/components下面生成我们的组件相关文件

1. hello-world.component.html 组件要显示的内容
2. hello-world.component.scss 组件样式定义,创建项目时可以预先选择css预编译器
3. hello-world.component.ts 组件核心类
4. hello-world.component.spec.ts 组单元测试使用
5. 我们先打开**hello-world.component.ts**** 组件核心类来看一下内容, 除了常规的导入模块和创建了一个****HelloWorldComponent**类之外,还使用了**@Component**装饰器。

1. selector: 标注组件的名称,在使用组件的时候使用的就是它
2. templateUrl: 标注html模板的路径
3. styleUrls: 标注html模板使用的样式的路径,我们看到是用的数组格式,说明传递多个样式文件应该是没有问题的
4. 组件相关的其他文件暂时先放一放,在Vue开发的时候我们创建好的组件总是要挂载后才能使用的,那angular需要挂载吗?怎么操作呢?
   1. 应为angular项目创建的时候默认初始化了git仓库,我们这会儿可以看到还有一个文件是有变化的,那就是app.module.ts,打开文件后我看就看到了新创建的组件已经自动的挂载到了全局的app上。
5. 现在我们通过修改**app.component.html**内容来显示一下我们自己的组件吧
   1. 清空app.component.html的内容
   2. 还记得我们创建的组件叫什么吗? 我们要将组件显示到app里面: <app-hello-world></app-hello-world>
6. 启动项目**ng serve --open**就可以看到页面显示的是**hello-world works!**,这就是我们组件创建时自动生成的内容。

丰富一下我们的组件

绑定属性

1. 语法示例: <img [attribute]="variable"/>
2. 在组件的ts文件中增加imgUrl属性: public imgUrl: string = 'assets/logo.png';
3. 在组件的html模板中使用: <img [src]="imgUrl" alt="">
4. 看一下我们的页面吧

绑定事件

1. 语法示例: <button (event)="fun($event)">触发一下
2. 在组件的ts文件中新增print函数

print(event: Event) {
  console.log('[ print ] >>', 'hello world', '事件类型: ' + event.type);
}

3. 在组件的html模板中添加一个按钮来触发print函数

<button (click)="print($event)">触发一下</button>

双向绑定

1. 双向绑定的构成: 属性绑定+事件绑定, 所以双向绑定的语法就是 [(attribute)]="variable"
2. 我们准备一个演示双向绑定的组件: ng g c components/sizer
   1. 组件中我们需要通过@Inout()装饰器来接收数据,通过@Output装饰器来派发数据来达到双向数据流通
   2. 组件ts代码(代码来自angular中文网):

export class SizerComponent {
 
  @Input()  size!: number | string;
  @Output() sizeChange = new EventEmitter<number>();
 
  dec() { this.resize(-1); }
  inc() { this.resize(+1); }
 
  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

3. 组件html模板代码(代码来自angular中文网):

<div>
  <button (click)="dec()" title="smaller">-</button>
  <button (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

3. 我们将演示双向绑定的组件挂载到app,并在app组件中声明fontSizePx变量

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

4. 通过演示可以看得出
   1. app中的fontSizePx属性被传入到sizer组件中
   2. 在操作sizer组件后又将size更新到了app中的fontSizePx属性,页面随之更新

结构型指令

1. NgIf(内置):
   1. 给组件ts添加属性: public isShow: boolean = true;
   2. 给组件html模板添加演示代码:

<button (click)="isShow = !isShow">{{ isShow ? "不显示" : "显示" }}</button>
<p *ngIf="isShow">Hello World</p>

2. NgFor(内置):
   1. 给组件ts添加属性: public list: Array<String> = ['小米', '华为', '苹果'];
   2. 给组件html模板添加演示代码:

<div *ngFor="let item of list; let i = index">
  {{ i }} {{ item }}
</div>

3. NgSwitch(内置):
   1. 给组件ts添加属性: public status: number = 1;
   2. 给组件html模板添加演示代码:

<div [ngSwitch]="status">
  <div *ngSwitchCase="0">等待中</div>
  <div *ngSwitchCase="1">已完成</div>
  <div *ngSwitchDefault>未知</div>
</div>

4. 特点:
   1. 一个标签一个结构型指令
   2. *标记

属性型指令

1. NgClass
   1. 在组件的样式文件中添加:

.class1{
  background-color: chocolate;
}
.class2{
  width: 100px;
  height: 50px;
}
.class3{
  font-size: 20px;
  color: chartreuse;
}

2. 在组件html模板中绑定的时候可以通过变量来选择性的开启和关闭部分样式

<div [ngClass]="{ class1: false, class2: true, class3: true }">
  绑定一组class试试
</div>

2. NgStyle

在组件html模板中绑定一组style试试

<div [ngStyle]="{ 'background-color': 'chocolate', width: '150px' }">
  绑定一组style试试
</div>

3. NgModel(只适用于表单元素)
   1. 在组件ts中添加属性: public value: string = 'hello world';
   2. 在组件的html中添加演示代码:

<input type="text" [(ngModel)]="value">
<p>value: {{value}}</p>

3. 注意需要在module中导入FormsModule,要不然功能无法实现
4. 此时页面恢复正常,通过在输入框中更新内容,页面绑定的数据同时更新

管道

1. angular中的管道与Vue中的过滤器雷同,均可以使数据按指定的格式进行显示,同样使用管道符来操作
2. 内置管道:
3. 演示:
   1. 将时间格式化为统一样式

<div>DatePipe: {{ currentTime | date: "yyyy‐MM‐dd HH:mm:ss" }}</div>

2. 将字符串全部转为小写

<div>LowerCasePipe: {{ value | lowercase }}</div>

3. 将字符串全部转为大写

<div>UpperCasePipe: {{ value | uppercase }}</div>

4. 将对象转换成json字符串在页面输出,方便调试

结语

本章我们主要演示了组件的基础使用,可以实现简单的功能,下一章我们要演示的组件间的通讯。还有多少同学在用angular呀,要不是工作需要也不会再接触了,第一次学angualr还是在15年。还有一点哈,原来都是pia pia贴代码,今天头一回自述的多,就当锻炼了,表述不周还请指正哈。