Analisis ringkas templat komponen dalam sudut

Artikel ini akan membawa anda melalui templat komponen dalam sudut dan memperkenalkan secara ringkas mata pengetahuan yang berkaitan: pengikatan data, pengikatan harta, pengikatan peristiwa, pengikatan data dua hala, unjuran kandungan, dsb. , harapan ia membantu semua orang!

Angular ialah rangka kerja untuk membina HTML aplikasi menggunakan CSS, TypeScript, 客户端. [Tutorial berkaitan yang disyorkan: "单页tutorial sudut"]

Angular ialah rangka kerja

yang menyepadukan sejumlah besar 重量级 modul berfungsi. 开箱即用

Angular direka untuk pembangunan aplikasi berskala besar, menyediakan kaedah organisasi kod yang bersih dan longgar, menjadikan aplikasi kemas dan lebih mudah diselenggara.

dokumentasi angualr:

• Angular: https://angular.io/

• Angular Chinese: https:// angular.cn/

• Angular CLI: https://cli.angular.io/

Angular CLI Chinese: https://angular.cn/ cli

Templat komponen

1 Pengikatan data

Pengikatan data Iaitu. , data dalam kelas komponen dipaparkan dalam templat komponen Apabila data dalam kelas komponen berubah, ia akan disegerakkan secara automatik ke templat komponen (DOM dipacu data).

Gunakan

untuk pengikatan data dalam Angular, iaitu, 插值表达式 . {<!-- -->{ }}

<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. Pengikatan atribut

2.1 Atribut biasa

Ikatan atribut Terbahagi kepada dua situasi,

dan 绑定 DOM 对象属性. 绑定HTML标记属性

• Gunakan

  untuk mengikat sifat objek DOM kepada elemen. [属性名称]

  <img [src]="imgUrl"/>

• Gunakan

  untuk mengikat atribut tag HTML kepada elemen [attr.属性名称]

  <td [attr.colspan]="colSpan"></td>

Dalam kebanyakan kes, atribut objek DOM Terdapat hubungan yang sepadan dengan atribut tag HTML, jadi kes pertama digunakan.

Tetapi beberapa atribut

wujud tetapi tidak wujud dalam objek DOM Dalam kes ini, kes kedua perlu digunakan, sebagai contoh, atribut 只有 HTML 标记 tidak wujud dalam objek DOM. colspan

atau atribut HTML tersuai juga perlu menggunakan huruf kedua.

2.2 atribut kelas

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

2.3 atribut gaya

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

3. Pengikatan acara

<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>

export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // this 指向组件类的实例对象
    this.title // "test"
  }
}

4. Dapatkan objek DOM asli

4.1 dalam Dapatkan.

<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>

dalam templat komponen 4.2 Dapatkan

dalam kelas komponen Gunakan

penghias untuk mendapatkan elemen 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)
  }
}

Gunakan

untuk mendapatkan set elemen 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 data Penyegerakan dua arah antara kelas komponen dan templat komponen. Angular meletakkan fungsi pengikatan data dua hala dalam modul

, jadi untuk melaksanakan pengikatan data dua hala anda perlu bergantung pada modul ini.

@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>

6 Unjuran kandungan

export class AppComponent {
  username: string = ""
  change() {
    this.username = "hello Angular"
  }
}

Jika hanya ada satu ng-. kandungan, Tiada atribut pilih diperlukan.

<!-- app.component.html -->
<bootstrap-panel>
	<div class="heading test">
        Heading
  </div>
  <div class="body">
        Body
  </div>
</bootstrap-panel>

ng-content akan digantikan dengan

<!-- 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>

dalam penyemak imbas Jika anda tidak mahu div tambahan ini, anda boleh menggunakan ng-container untuk menggantikan div ini.

ng-kandungan biasanya digunakan dalam unjuran: apabila komponen induk perlu menayangkan data kepada komponen anak, ia mesti menentukan tempat untuk menayangkan data kepada komponen anak Pada masa ini, anda boleh gunakan teg ng-content. Membuat ruang letak tidak akan menghasilkan elemen DOM sebenar, tetapi hanya akan menyalin kandungan yang diunjurkan. <div class="heading test"></div>

ng-container ialah teg bekas khas yang tidak menghasilkan elemen DOM sebenar, jadi penambahan atribut pada teg ng-container adalah tidak sah.

7 Pemprosesan toleransi kesalahan pengikatan data

<!-- app.component.html -->
<bootstrap-panel>
	<ng-container class="heading">
        Heading
    </ng-container>
    <ng-container class="body">
        Body
    </ng-container>
</bootstrap-panel>

// app.component.ts
export class AppComponent {
    task = {
        person: {
            name: '张三'
        }
    }
}

8. , gaya global

<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */

Video Pengaturcaraan

<!-- 第二种方式 在 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"
]

Atas ialah kandungan terperinci Analisis ringkas templat komponen dalam sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!