angular中的组件模板怎么用

这篇文章主要介绍“angular中的组件模板怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“angular中的组件模板怎么用”文章能帮助大家解决问题。

创新互联建站自2013年起，是专业互联网技术服务公司，拥有项目成都网站制作、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元鹰潭做网站,已为上家服务,为鹰潭各地企业和个人服务,联系电话:18980820575

angular中的组件模板怎么用

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

Body

angular中的组件模板怎么用

组件模板

{{message}}

{{getInfo()}}

{{a == b ? '相等': '不等'}}

{{'Hello Angular'}}

其他资讯