首页 > web前端 > js教程 > 一文浅析angular中的组件模板

一文浅析angular中的组件模板

青灯夜游
发布: 2022-05-16 21:01:03
转载
2303 人浏览过

本篇文章带大家了解一下angular中的组件模板,简单介绍一下相关知识点:数据绑定、属性绑定、事件绑定、双向数据绑定、内容投影等等,希望对大家有所帮助!

一文浅析angular中的组件模板

Angular 是一个使用 HTMLCSSTypeScript 构建客户端应用的框架,用来构建单页应用程序。【相关教程推荐:《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 中使用插值表达式进行数据绑定,即 {<!-- -->{ }}

<h2>{{message}}</h2>
<h2>{{getInfo()}}</h2>
<h2>{{a == b ? &#39;相等&#39;: &#39;不等&#39;}}</h2>
<h2>{{&#39;Hello Angular&#39;}}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->
登录后复制

2、属性绑定

2.1 普通属性

属性绑定分为两种情况,绑定 DOM 对象属性绑定HTML标记属性

  • 使用 [属性名称] 为元素绑定 DOM 对象属性。

    <img [src]="imgUrl"/>
    登录后复制
  • 使用 [attr.属性名称] 为元素绑定 HTML 标记属性

    <td [attr.colspan]="colSpan"></td>
    登录后复制

在大多数情况下,DOM 对象属性和 HTML 标记属性是对应的关系,所以使用第一种情况。

但是某些属性只有 HTML 标记存在,DOM 对象中不存在,此时需要使用第二种情况,比如 colspan 属性,在 DOM 对象中就没有。

或者自定义 HTML 属性也需要使用第二种情况。

2.2 class 属性

<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{&#39;active&#39;: true, &#39;error&#39;: true}"></div>
登录后复制

2.3 style 属性

<button [style.backgroundColor]="isActive ? &#39;blue&#39;: &#39;red&#39;">按钮</button>
<button [ngStyle]="{&#39;backgroundColor&#39;: &#39;red&#39;}">按钮</button>
登录后复制

3、事件绑定

<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>
登录后复制
export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // this 指向组件类的实例对象
    this.title // "test"
  }
}
登录后复制

4、获取原生 DOM 对象

4.1 在组件模板中获取

<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>
登录后复制

4.2 在组件类中获取

使用 ViewChild 装饰器获取一个元素

<p #paragraph>home works!</p>
登录后复制
import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"

export class HomeComponent implements AfterViewInit {
  @ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit() {
    console.log(this.paragraph?.nativeElement)
  }
}
登录后复制

使用 ViewChildren 获取一组元素

<ul>
  <li #items>a</li>
  <li #items>b</li>
  <li #items>c</li>
</ul>
登录后复制
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<HTMLLIElement> | undefined
  ngAfterViewInit() {
    console.log(this.items?.toArray())
  }
}
登录后复制

5、双向数据绑定

数据在组件类和组件模板中双向同步。

Angular 将双向数据绑定功能放在了 @angular/forms 模块中,所以要实现双向数据绑定需要依赖该模块。

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}
登录后复制
<input type="text" [(ngModel)]="username" />
<button (click)="change()">在组件类中更改 username</button>
<div>username: {{ username }}</div>
登录后复制
export class AppComponent {
  username: string = ""
  change() {
    this.username = "hello Angular"
  }
}
登录后复制

6、内容投影

<!-- app.component.html -->
<bootstrap-panel>
	<div class="heading test">
        Heading
  </div>
  <div class="body">
        Body
  </div>
</bootstrap-panel>
登录后复制
<!-- panel.component.html -->
<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
</div>
登录后复制

如果只有一个ng-content,不需要select属性。

ng-content在浏览器中会被 <div class="heading test"></div> 替代,如果不想要这个额外的div,可以使用ng-container替代这个div。

  • ng-content 通常在投影中使用:当父组件需要向子组件投影数据时必须指定将数据投影到子组件的哪个位置,这时候就可以利用ng-content标签来做一个占位符,不会产生真实的dom元素,只会把投影的内容copy过来。
  • ng-container是一个特殊的容器标签,不会产生真实的dom元素,所以在ng-container标签添加属性是无效的。
<!-- app.component.html -->
<bootstrap-panel>
	<ng-container class="heading">
        Heading
    </ng-container>
    <ng-container class="body">
        Body
    </ng-container>
</bootstrap-panel>
登录后复制

7、数据绑定容错处理

// app.component.ts
export class AppComponent {
    task = {
        person: {
            name: &#39;张三&#39;
        }
    }
}
登录后复制
<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>
登录后复制

8、全局样式

/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */
登录后复制
<!-- 第二种方式 在 index.html 文件中  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
登录后复制
// 第三种方式 在 angular.json 文件中
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]
登录后复制

更多编程相关知识,请访问:编程视频!!

以上是一文浅析angular中的组件模板的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:csdn.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板