Home > Article > Web Front-end > A brief analysis of component templates in angular
This article will take you through the component templates in angular and briefly introduce the relevant knowledge points: data binding, property binding, event binding, two-way data binding, content projection, etc. ,I hope to be helpful!
Angular is a client## built using HTML, CSS, TypeScript #A framework for building single-page applications. [Related tutorial recommendations: "angular tutorial"]
heavyweight framework that integrates a large number ofout-of-the-box function module.
1. Data binding
Data binding That is, the data in the component class is displayed in the component template. When the data in the component class changes, it will automatically be synchronized to the component template (data-driven DOM). Useinterpolation expression for data binding in Angular, that is, {{ }}<!-- -->.
<h2>{{message}}</h2>
<h2>{{getInfo()}}</h2>
<h2>{{a == b ? '相等': '不等'}}</h2>
<h2>{{'Hello Angular'}}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->
2. Attribute binding
2.1 Common attributes
Attribute binding is divided into In two cases,binds DOM object attributes and binds HTML tag attributes.
[property name] to bind DOM object properties to elements.
<img [src]="imgUrl"/>
[attr.attribute name]Bind HTML tag attributes to elements
<td [attr.colspan]="colSpan"></td>
only exist in HTML tags and do not exist in the DOM object. In this case, you need to use the second case, such as the colspan attribute, in the DOM object Just not.
2.2 class attribute
<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{'active': true, 'error': true}"></div>
2.3 style attribute
<button [style.backgroundColor]="isActive ? 'blue': 'red'">按钮</button>
<button [ngStyle]="{'backgroundColor': 'red'}">按钮</button>
3. Event binding
<button (click)="onSave($event)">按钮</button> <!-- 当按下回车键抬起的时候执行函数 --> <input type="text" (keyup.enter)="onKeyUp()"/>
export class AppComponent {
title = "test"
onSave(event: Event) {
// this 指向组件类的实例对象
this.title // "test"
}
}
4. Get the native DOM object
4.1 Get## in the component template #3b39778b4d3d5bec9ef88483dd2ffc49
Use
ViewChild decorator to get an element in the component class<pre class="brush:php;toolbar:false">d9e1532bd77523d7523e227ff359de85home works!94b3e26ee717c64999d7867364b1b4a3</pre><pre class="brush:js;toolbar:false;">import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"
export class HomeComponent implements AfterViewInit {
@ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
ngAfterViewInit() {
console.log(this.paragraph?.nativeElement)
}
}</pre>Use
Get a set of elements <pre class="brush:html;toolbar:false;"><ul>
<li #items>a</li>
<li #items>b</li>
<li #items>c</li>
</ul></pre><pre class="brush:js;toolbar:false;">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())
}
}</pre>
5. Two-way data bindingData is synchronized in both directions in the component class and component template.
Angular places the two-way data binding function in the
@angular/forms module, so to implement two-way data binding you need to rely on this module. <pre class="brush:js;toolbar:false;">import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {}</pre><pre class="brush:html;toolbar:false;"><input type="text" [(ngModel)]="username" />
<button (click)="change()">在组件类中更改 username</button>
<div>username: {{ username }}</div></pre><pre class="brush:js;toolbar:false;">export class AppComponent {
username: string = ""
change() {
this.username = "hello Angular"
}
}</pre>
6. Content projection<!-- 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>If there is only one ng-content, the select attribute is not required.
ng-content will be replaced by
290914cdcad83023eae6a5478da7e0ba16b28748ea4df4d9c2150843fecfba68 in the browser. If you don't want this extra div, you can use ng -container replaces this div.
<!-- app.component.html -->
<bootstrap-panel>
<ng-container class="heading">
Heading
</ng-container>
<ng-container class="body">
Body
</ng-container>
</bootstrap-panel>7. Data binding fault tolerance processing// app.component.ts
export class AppComponent {
task = {
person: {
name: '张三'
}
}
}<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>
8. Global style/* 第一种方式 在 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"
]
For more programming related knowledge, please visit:
The above is the detailed content of A brief analysis of component templates in angular. For more information, please follow other related articles on the PHP Chinese website!