@let: Pengkompil ciri baharu dalam Angular 1

pengenalan

Dengan ketibaan Angular 18.1, versi ini memperkenalkan ciri baharu yang menarik kepada pengkompil: keupayaan untuk mengisytiharkan satu atau lebih pembolehubah templat.
Bagaimanakah ciri ini digunakan, dan apakah kes penggunaan yang berbeza?

Artikel ini bertujuan untuk menjawab.

Ciri terbaharu pengkompil: @let

Dengan versi terkini Angular, pasukan telah memperkenalkan fungsi baharu ke dalam pengkompil, dan fungsi ini diterjemahkan ke dalam @-sintaks.

Beginilah cara sintaks aliran kawalan baharu wujud

• @jika
• @untuk
• @suis

dan, lebih baru-baru ini, @let

Sebagai peraturan umum, cara paling mudah untuk mencipta pembolehubah templat adalah dengan menggunakan

• arahan struktur *ngIf dengan kata kunci sebagai kata kunci

atau menggunakan sintaks aliran kawalan baharu

• @jika dengan kata kunci sebagai

<!-- older control flow syntax -->
<div *ngIf="user$ |async as user">
  {{ user.name }}
</div>

<!-- new control flow syntax -->
@if(user$ |async; as user){
  <div>{{ user.name }}</div>
}

Ciri berguna ini membolehkan kami menyimpan hasil paip async dalam pembolehubah untuk digunakan kemudian dalam templat.

Walau bagaimanapun, sintaks ini menimbulkan beberapa persoalan. Di sini, syarat menyemak sama ada pengembalian paip async adalah benar dan oleh itu sama ada nilai pulangan berbeza daripada sebarang nilai yang dianggap palsu dalam javascript.

Keadaan ini akan berfungsi dengan baik jika pulangan ialah objek atau tatasusunan.

tetapi jika pulangan adalah nombor dan khususnya nombor 0

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  <div>{{ myNumber }}</div>
}

Di sinilah @let masuk.

@let tidak menyemak syarat, ia hanya membenarkan anda mengisytiharkan pembolehubah templat setempat dengan cara yang mudah

jadi contoh kod di atas menjadi lebih mudah dan lebih elegan untuk ditulis

@let myNumber = (numbers$ | async) ?? 0;
<div>{{ myNumber }}</div>

Dengan cara ini pembolehubah myNumber akan sentiasa dipaparkan.

Cara yang berbeza menggunakan @let

Salah satu senario paling klasik dengan pengisytiharan berubah-ubah ialah menyimpan hasil ungkapan kompleks.

Selalunya tidak digalakkan untuk menggunakan fungsi dalam keadaan. Penggunaan fungsi dalam keadaan mempunyai kesan ke atas prestasi dalam erti kata bahawa pada pergerakan tetikus yang sedikit, atau perubahan dalam templat, fungsi itu dinilai semula.

@let, seperti yang diterangkan di atas, tidak menilai, tetapi hanya mengisytiharkan pembolehubah setempat. Pembolehubah ini akan dinilai semula hanya jika salah satu kebergantungannya berubah. Jadi memanggil fungsi bukanlah idea yang tidak baik untuk ungkapan seperti ungkapan kompleks.

<ul>
  @for(user of users(); track user.id) {
    @let isAdmin = checkIfAdmin(user);
   <li>User is admin: {{ isAdmin }}</li>
  }
</ul>

Gunakan @let dengan isyarat

@let serasi dengan isyarat, dan digunakan seperti berikut

@let userColor = user().preferences?.colors?.primaryColor || 'white';
<span>user favorite color is {{ userColor }}</span>

@let dan ungkapan javascript

Seperti yang anda lihat, @let boleh digunakan untuk menilai sebarang jenis ungkapan javascript, selain daripada, sebagai contoh, instantiasi kelas

Dengan cara ini, pengendali aritmetik ditafsirkan dan beberapa pembolehubah boleh diisytiharkan pada beberapa baris berbeza atau hanya pada satu baris.

<div>  
    @for (score of scores(); track $index) {
        @let total = total + score, max = calcMax(score);
        <h1>final score: {{ total }}</h1>
    }
</div>

Perkara hebat lain yang @let bawa

Seperti yang diterangkan di atas, tingkah laku @let sangat serupa dengan tingkah laku let dalam javascript, yang mempunyai faedah berikut

• skop berfungsi seperti let skop dalam javascript
• gangguan menaip yang lebih baik dalam templat
• ralat ditimbulkan jika pembolehubah (biar) digunakan sebelum diisytiharkan

Atas ialah kandungan terperinci @let: Pengkompil ciri baharu dalam Angular 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!