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"]
Angular is a
heavyweight framework that integrates a large number ofout-of-the-box function module.
Angular is designed for large-scale application development and provides a clean and loosely coupled code organization method, making the application tidy and easier to maintain.
angualr Documentation:
- Angular: https://angular.io/
- Angular Chinese: https:// angular.cn/
- Angular CLI: https://cli.angular.io/
Angular CLI Chinese: https://angular.cn/ cli-
Component template
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).
Use
interpolation 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> <!-- 对数据中的代码进行转义 -->Copy after login
2. Attribute binding
2.1 Common attributes
Attribute binding is divided into In two cases,
binds DOM object attributes and binds HTML tag attributes.
In most cases Below, DOM object attributes and HTML tag attributes are corresponding, so the first case is used.
But some attributes
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.
Or custom HTML attributes also need to use the second case.
2.2 class attribute
<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{'active': true, 'error': true}"></div>Copy after login
2.3 style attribute
<button [style.backgroundColor]="isActive ? 'blue': 'red'">按钮</button>
<button [ngStyle]="{'backgroundColor': 'red'}">按钮</button>Copy after login
3. Event binding
<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>
Copy after login
export class AppComponent {
title = "test"
onSave(event: Event) {
// this 指向组件类的实例对象
this.title // "test"
}
}Copy after login
4. Get the native DOM object
4.1 Get## in the component template #<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>
Copy after login
4.2 Get
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: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><div class="contentsignin">Copy after login</div></div>Use
ViewChildren
Get a set of elements <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;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: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><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:js;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:html;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:js;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>Copy after login
<!-- 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>Copy after login
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.
ng-content is usually used in projection: when the parent component needs to project data to the child component, it must specify where to project the data to the child component. At this time, you can use the ng-content tag. Making a placeholder will not produce a real DOM element, but will only copy the projected content.
- ng-container is a special container tag that does not generate real dom elements, so adding attributes to the ng-container tag is invalid.
<!-- app.component.html -->
<bootstrap-panel>
<ng-container class="heading">
Heading
</ng-container>
<ng-container class="body">
Body
</ng-container>
</bootstrap-panel>Copy after login
7. Data binding fault tolerance processing// app.component.ts
export class AppComponent {
task = {
person: {
name: '张三'
}
}
}Copy after login
<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>Copy after login
8. Global style/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */
Copy after login
<!-- 第二种方式 在 index.html 文件中 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
Copy after login
// 第三种方式 在 angular.json 文件中
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Copy after login
Programming Video
! !
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)
