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

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

---

1、组件的基础知识

angular中的组件一般由四个文件组成。其中，.html定义显示内容，.css定义元素样式，.ts定义页面逻辑，.spec.ts定义自测逻辑。新建一个angular项目时就会自动生成一个app组件。

初学者只需要关注.html和.ts文件即可。

下面是一个样例。.html的内容与.ts的内容如下。

<!-- app.component.html -->
<h1>Hello World</h1>
<h1>{{title}}</h1>

// app.component.ts
import { Component } from '@angular/core';
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'title';
}

最后呈现的效果如下

1.1、表达式

1.1.1、一般情况

只要在ts文件中的export class className中定义的数据，就可以在对应的html文件中通过{{veriableName}}获取。比如上面的例子中，html使用{{title}}动态获取title并展示。

表达式也可以使用ts中定义的函数。比如在ts中定义sum函数

export AppComponent{sum(a, b){return a+b;}
}

html使用sum函数

<h1>3+4={{sum(3,4)}}<h2>

页面会显示3+4=7。

1.1.2、html元素的属性使用表达式

如果是在html的元素中使用表达式，那写法会有些不同。

比如我们想在h1元素中自定义一个属性叫data-index，那在该属性中使用表达式的写法应该如下

<h1 [attr.data-index]='msg'></h1>

msg是ts中定义的一个属性。

如果是一个已经定义好的属性，比如说class属性，那在中括号中不用写attr。

<h1 [class]='msg'></h1>

1.1.3、html元素的事件使用表达式

事件使用表达式要使用小括号，例子如下。

<button (click)="changeColor($event)"></button>

其中changeColor()是ts中定义的函数。

export AppComponent{changeColor(event) {}
}

1.2、快速创建一个组件

我们可以通过ng g component location快速创建一个组件，其中g是代表generate。比如我们在项目根目录下使用ng g component new就可以快速在根目录下创建组件。

创建组件时建议以这样的方式来做，除了方便以外，这个方式还能自动将组件导入到根组件中。这个会在后面提及。

---

2、主组件

创建Angular项目时，会在app下创建app.module.ts。这个就是主组件，里面定义着初始页面和将哪些组件引入到该项目中。以下是新项目创建一个NewComponent之后，app.module.ts的文件内容。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';
import { NewComponent } from './new/new.component';@NgModule({declarations: [AppComponent,NewComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

2.1、declarations

我们定义的组件要在declarations中声明才能被其它组件识别，使用ng g component指令可以自动将组件放入声明中

## 2.2、bootstrap 定义整个项目应该使用哪一个组件作为初始页面展示。

---

3、组件

组件的基本元素由@Component和export两个关键字带出，一个最简单的组件定义如下所示

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'title';
}

3.1、@Component

@Component中定义这该组件的名称，和组件中页面元素及关联的样式，示例如下。

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'title';
}

• selector：可以理解为组件的名称，当其它组件想要引用该组件时，要使用selector的值来找到该组件。下面是在一个组件中引入另一个组件的过程。

比如我定义一个新组件，组件的html定义一个标题

<!-- new.conponent.html -->
<p>New Yorks!</p>

对应的ts文件内容如下

// new.component.ts
@Component({selector: 'app-new',templateUrl: './new.component.html',styleUrls: ['./new.component.css']
})
export class NewComponent implements OnInit {constructor() { }ngOnInit(): void {}
}

然后在主组件中将该组件引入声明

// app.module.ts
@NgModule({declarations: [AppComponent,NewComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

在app.componet.html中引入刚才定义的组件。

<!-- app.componet.html -->
<h1>Hello World</h1>
<app-new></app-new>

最后打开app.componet.html的页面，效果如下。