本篇文章带大家了解一下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 属性也需要使用第二种情况。
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、内容投影
HeadingBody
登录后复制
登录后复制
如果只有一个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.tsexport 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"]
登录后复制
更多编程相关知识，请访问：编程视频！！
以上就是一文浅析angular中的组件模板的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2701284.html
