本篇文章带大家了解一下angular中的组件模板，简单介绍一下相关知识点：数据绑定、属性绑定、事件绑定、双向数据绑定、内容投影等等，希望对大家有所帮助！
Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。【相关教程推荐：《angular教程》】
Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。
Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。
angualr文档：
Angular：https://angular.io/
Angular 中文：https://angular.cn/
Angular CLI：https://cli.angular.io/
- Angular CLI 中文：https://angular.cn/cli
组件模板
1、数据绑定
数据绑定就是将组件类中的数据显示在组件模板中，当组件类中的数据发生变化时会自动被同步到组件模板中（数据驱动 DOM ）。
在 Angular 中使用插值表达式进行数据绑定，即 {{ }} 。
{{message}}
{{getInfo()}}
{{a == b ? '相等': '不等'}}
{{'Hello Angular'}}
2、属性绑定
2.1 普通属性
属性绑定分为两种情况，绑定 DOM 对象属性和绑定HTML标记属性。
-
使用
[属性名称]为元素绑定 DOM 对象属性。 -
使用
[attr.属性名称]为元素绑定 HTML 标记属性
在大多数情况下，DOM 对象属性和 HTML 标记属性是对应的关系，所以使用第一种情况。
但是某些属性只有 HTML 标记存在，DOM 对象中不存在，此时需要使用第二种情况，比如 colspan 属性，在 DOM 对象中就没有。
或者自定义 HTML 属性也需要使用第二种情况。
DM建站系统汽车保养维修HTML5网站模板,DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装，把模板和区块组装起来，产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC，手机，微信都可以访问)。后台操作简单，维护方便。DM企业建站系统安装步骤：第一步，先用phpmyadmin导入sql文件。 第二步：把文件放到你的本地服务器
2.2 class 属性
2.3 style 属性
3、事件绑定
export class AppComponent {
title = "test"
onSave(event: Event) {
// this 指向组件类的实例对象
this.title // "test"
}
}4、获取原生 DOM 对象
4.1 在组件模板中获取
4.2 在组件类中获取
使用 ViewChild 装饰器获取一个元素
home works!
import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"
export class HomeComponent implements AfterViewInit {
@ViewChild("paragraph") paragraph: ElementRef | undefined
ngAfterViewInit() {
console.log(this.paragraph?.nativeElement)
}
} 使用 ViewChildren 获取一组元素
- a
- b
- c
import { AfterViewInit, QueryList, ViewChildren } from "@angular/core"
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styles: []
})
export class HomeComponent implements AfterViewInit {
@ViewChildren("items") items: QueryList | undefined
ngAfterViewInit() {
console.log(this.items?.toArray())
}
} 5、双向数据绑定
数据在组件类和组件模板中双向同步。
Angular 将双向数据绑定功能放在了 @angular/forms 模块中，所以要实现双向数据绑定需要依赖该模块。
import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {}username: {{ username }}
export class AppComponent {
username: string = ""
change() {
this.username = "hello Angular"
}
}6、内容投影
如果只有一个ng-content，不需要select属性。
ng-content在浏览器中会被 替代，如果不想要这个额外的div，可以使用ng-container替代这个div。
- ng-content 通常在投影中使用：当父组件需要向子组件投影数据时必须指定将数据投影到子组件的哪个位置，这时候就可以利用ng-content标签来做一个占位符，不会产生真实的dom元素，只会把投影的内容copy过来。
- ng-container是一个特殊的容器标签，不会产生真实的dom元素，所以在ng-container标签添加属性是无效的。
Heading Body
7、数据绑定容错处理
// app.component.ts
export class AppComponent {
task = {
person: {
name: '张三'
}
}
}{{ task.person.name }} {{ task.person?.name }}
8、全局样式
/* 第一种方式 在 styles.css 文件中 */ @import "~bootstrap/dist/css/bootstrap.css"; /* ~ 相对node_modules文件夹 */
// 第三种方式 在 angular.json 文件中 "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ]
更多编程相关知识，请访问：编程视频！！
