angular中的組件模板怎么用
這篇文章主要介紹“angular中的組件模板怎么用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“angular中的組件模板怎么用”文章能幫助大家解決問題。
創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元鷹潭做網(wǎng)站,已為上家服務(wù),為鷹潭各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575
Angular 是一個(gè)使用 HTML、CSS、TypeScript 構(gòu)建客戶端應(yīng)用的框架，用來構(gòu)建單頁(yè)應(yīng)用程序。
Angular 是一個(gè)重量級(jí)的框架，內(nèi)部集成了大量開箱即用的功能模塊。
Angular 為大型應(yīng)用開發(fā)而設(shè)計(jì)，提供了干凈且松耦合的代碼組織方式，使應(yīng)用程序整潔更易于維護(hù)。
組件模板
1、數(shù)據(jù)綁定
數(shù)據(jù)綁定就是將組件類中的數(shù)據(jù)顯示在組件模板中，當(dāng)組件類中的數(shù)據(jù)發(fā)生變化時(shí)會(huì)自動(dòng)被同步到組件模板中（數(shù)據(jù)驅(qū)動(dòng) DOM ）。
在 Angular 中使用插值表達(dá)式進(jìn)行數(shù)據(jù)綁定，即 {{ }} 。
{{message}}
{{getInfo()}}
{{a == b ? '相等': '不等'}}
{{'Hello Angular'}}
2、屬性綁定
2.1 普通屬性
屬性綁定分為兩種情況，綁定 DOM 對(duì)象屬性和綁定HTML標(biāo)記屬性。
在大多數(shù)情況下，DOM 對(duì)象屬性和 HTML 標(biāo)記屬性是對(duì)應(yīng)的關(guān)系，所以使用第一種情況。
但是某些屬性只有 HTML 標(biāo)記存在，DOM 對(duì)象中不存在，此時(shí)需要使用第二種情況，比如 colspan 屬性，在 DOM 對(duì)象中就沒有。
或者自定義 HTML 屬性也需要使用第二種情況。
2.2 class 屬性
按鈕
2.3 style 屬性
按鈕
按鈕
3、事件綁定
按鈕
export class AppComponent {
title = "test"
onSave(event: Event) {
// this 指向組件類的實(shí)例對(duì)象
this.title // "test"
}
}4、獲取原生 DOM 對(duì)象
4.1 在組件模板中獲取
4.2 在組件類中獲取
使用 ViewChild 裝飾器獲取一個(gè)元素
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 獲取一組元素
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、雙向數(shù)據(jù)綁定
數(shù)據(jù)在組件類和組件模板中雙向同步。
Angular 將雙向數(shù)據(jù)綁定功能放在了 @angular/forms 模塊中，所以要實(shí)現(xiàn)雙向數(shù)據(jù)綁定需要依賴該模塊。
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、內(nèi)容投影
Heading
重慶分公司
重慶分公司
