angular中的组件模板怎么用
这篇文章主要介绍“angular中的组件模板怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“angular中的组件模板怎么用”文章能帮助大家解决问题。
创新互联建站自2013年起,是专业互联网技术服务公司,拥有项目成都网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元鹰潭做网站,已为上家服务,为鹰潭各地企业和个人服务,联系电话:18980820575
Angular 是一个使用 HTML
、CSS
、TypeScript
构建客户端
应用的框架,用来构建单页
应用程序。
Angular 是一个重量级
的框架,内部集成了大量开箱即用
的功能模块。
Angular 为大型应用开发而设计,提供了干净且松耦合的代码组织方式,使应用程序整洁更易于维护。
组件模板
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: {{ username }}
export class AppComponent { username: string = "" change() { this.username = "hello Angular" } }
6、内容投影
Heading