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 #<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>
Use
ViewChild decorator to get an element in the component class<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p #paragraph>home works!</p></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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><div class="contentsignin">Copy after login</div></div>Use
Get a set of elements <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><ul>
<li #items>a</li>
<li #items>b</li>
<li #items>c</li>
</ul></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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><div class="contentsignin">Copy after login</div></div>
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. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {}</pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input type="text" [(ngModel)]="username" />
<button (click)="change()">在组件类中更改 username</button>
<div>username: {{ username }}</div></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export class AppComponent {
username: string = ""
change() {
this.username = "hello Angular"
}
}</pre><div class="contentsignin">Copy after login</div></div>
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>
ng-content will be replaced by
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"
]
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
