Panduan praktikal untuk menggunakan dan membuat arahan sudut - sitepoint

Artikel ini memberi tumpuan kepada arahan sudut - apa yang mereka, cara menggunakannya, dan membina sendiri.

Arahan mungkin merupakan sedikit aplikasi sudut yang paling penting, dan jika kita memikirkannya, unit sudut yang paling banyak digunakan, komponen, sebenarnya adalah arahan.

Komponen sudut tidak lebih daripada arahan dengan templat. Apabila kita mengatakan bahawa komponen adalah blok bangunan aplikasi sudut, kita sebenarnya mengatakan bahawa arahan adalah blok bangunan aplikasi sudut.

Takeaways Key

Arahan sudut adalah bahagian penting dalam aplikasi sudut, memperluaskan kuasa HTML dengan sintaks baru. Mereka adalah fungsi yang dilaksanakan apabila pengkompil sudut mendapati mereka di DOM, dan mereka boleh digunakan dalam unsur -unsur, atribut, kelas atau komen.
arahan sudut dipisahkan kepada tiga jenis: komponen, arahan atribut, dan arahan struktur. Komponen adalah arahan dengan templat, arahan atribut memanipulasi DOM dengan mengubah tingkah laku dan penampilannya, dan arahan struktur digunakan untuk mencipta dan memusnahkan unsur -unsur DOM.
• Arahan sudut boleh sama ada pra-ditakrifkan, seperti NG-Repeat, atau buatan khusus. Mewujudkan arahan tersuai melibatkan mengimport arahan dari @angular/teras, menentukan kelas arahan, dan menambahkannya kepada pengisytiharan dalam ngmodule.
• Penting untuk memilih jenis arahan yang tepat untuk tugas di tangan. Jika elemen masih berguna apabila DOM tidak dapat dilihat, arahan atribut harus digunakan. Jika elemen tidak menggunakannya, ia harus dikeluarkan menggunakan arahan struktur. Walau bagaimanapun, penjagaan harus diambil untuk mengelakkan membuat prestasi yang terlalu kompleks atau memberi kesan negatif terhadap prestasi.
Gambaran Keseluruhan Asas

Pada inti, arahan adalah fungsi yang dilaksanakan apabila pengkompil sudut mendapati ia di DOM. Arahan sudut digunakan untuk melanjutkan kuasa HTML dengan memberikan sintaks baru. Setiap arahan mempunyai nama-sama ada satu dari sudut yang diprediksi seperti NG-Repeat, atau adat yang boleh dipanggil apa-apa. Dan setiap arahan menentukan di mana ia boleh digunakan: dalam elemen, atribut, kelas atau komen.

Secara lalai, dari versi sudut 2 dan seterusnya, arahan sudut dipisahkan kepada tiga jenis yang berbeza:

Komponen

Seperti yang kita lihat sebelum ini, komponen hanya arahan dengan templat. Di bawah tudung, mereka menggunakan API Arahan dan memberi kami cara yang lebih bersih untuk menentukan mereka.

Dua jenis arahan yang lain tidak mempunyai templat. Sebaliknya, mereka khusus disesuaikan dengan manipulasi DOM.

arahan atribut

Arahan atribut memanipulasi DOM dengan mengubah tingkah laku dan penampilannya.

Kami menggunakan arahan atribut untuk menggunakan gaya bersyarat kepada unsur -unsur, menunjukkan atau menyembunyikan unsur -unsur atau mengubah secara dinamik tingkah laku komponen mengikut harta yang berubah.

Arahan Struktur

Ini khusus disesuaikan untuk mencipta dan memusnahkan elemen dom.

Beberapa arahan atribut - seperti tersembunyi, yang menunjukkan atau menyembunyikan elemen - pada dasarnya mengekalkan DOM seperti itu. Tetapi arahan sudut struktur adalah kurang mesra DOM, kerana mereka menambah atau menghapuskan unsur -unsur dari DOM. Oleh itu, apabila menggunakannya, kita perlu berhati -hati, kerana kita sebenarnya mengubah struktur HTML.

menggunakan arahan sudut yang sedia ada

Menggunakan arahan yang sedia ada dalam sudut adalah agak mudah, dan jika anda telah menulis aplikasi sudut pada masa lalu, saya cukup yakin anda telah menggunakannya. Arahan NGClass adalah contoh yang baik dari arahan atribut sudut yang ada:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Jadi, dengan menggunakan arahan NGCLASS pada contoh di bawah, kami sebenarnya menambah kelas biru ke perenggan kami, dan secara eksplisit tidak menambah kuning. Oleh kerana kita mengubah rupa kelas, dan tidak mengubah struktur HTML sebenar, ini jelas merupakan arahan atribut. Tetapi Angular juga menawarkan arahan struktur luar, seperti NGIF:

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

Dalam contoh ini, kami menggunakan Arahan NGIF untuk menambah atau mengeluarkan teks menggunakan butang. Dalam kes ini, struktur HTML itu sendiri terjejas, jadi jelas arahan struktur.

Untuk senarai lengkap arahan sudut yang tersedia, kami boleh menyemak dokumentasi rasmi.

seperti yang kita lihat, menggunakan arahan sudut agak mudah. Kuasa sebenar arahan sudut datang dengan keupayaan untuk mencipta sendiri. Angular menyediakan API yang bersih dan mudah untuk membuat arahan tersuai, dan itulah yang akan kita lihat di bahagian berikut.

Membuat arahan atribut

Membuat arahan adalah serupa dengan membuat komponen. Tetapi dalam kes ini, kami menggunakan penghias @directive. Sebagai contoh kami, kami akan membuat arahan yang dipanggil "my-error-directive", yang akan menyerlahkan dengan warna merah latar belakang elemen untuk menunjukkan kesilapan.

Sebagai contoh kami, kami akan menggunakan pakej QuickStart Angular 2. Kami hanya perlu mengklon repositori, kemudian jalankan pemasangan NPM dan NPM bermula. Ia akan memberi kita aplikasi boilerplate yang boleh kita gunakan untuk mencuba. Kami akan membina contoh kami di atas boilerplate itu.

mari kita mulakan dengan membuat fail yang dipanggil app.myerrordirective.ts pada folder SRC/APP dan menambah kod berikut kepadanya:

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Selepas mengimport arahan dari @angular/teras, kami boleh menggunakannya. Pertama, kita memerlukan pemilih, yang memberikan nama kepada arahan. Dalam kes ini, kita menyebutnya rata saya.

Amalan terbaik menentukan bahawa kita sentiasa menggunakan awalan ketika menamakan arahan sudut kita. Dengan cara ini, kami pasti mengelakkan konflik dengan sebarang atribut HTML standard. Kami juga tidak boleh menggunakan awalan NG. Itu yang digunakan oleh Angular, dan kami tidak mahu mengelirukan arahan sudut yang dibuat khas dengan orang yang telah ditentukan oleh Angular. Dalam contoh ini, awalan kami adalah saya-.

Kami kemudian mencipta kelas, myerrordirective. Untuk mengakses mana -mana elemen DOM kita, kita perlu menggunakan ElementRef. Oleh kerana ia juga tergolong dalam pakej @angular/teras, ia adalah satu perkara yang mudah untuk mengimportnya bersama -sama dengan arahan dan menggunakannya.

Kami kemudian menambahkan kod untuk benar -benar menyerlahkan pembina kelas kami.

Untuk dapat menggunakan arahan yang baru diwujudkan ini, kita perlu menambahkannya kepada pengisytiharan pada fail app.module.ts:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Akhirnya, kami ingin menggunakan arahan yang baru saja kami buat. Untuk melakukan itu, mari kita navigasi ke fail app.component.ts dan tambahkan yang berikut:

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

Hasil akhir kelihatan serupa dengan ini:

Membuat Arahan Struktur

Di bahagian sebelumnya, kita melihat bagaimana untuk membuat arahan atribut menggunakan Angular. Pendekatan untuk mewujudkan tingkah laku struktur adalah sama. Kami membuat fail baru dengan kod untuk arahan kami, maka kami menambahkannya ke perisytiharan, dan akhirnya, kami menggunakannya dalam komponen kami.

Untuk arahan struktur kami, kami akan melaksanakan salinan Arahan NGIF. Dengan cara ini, kita bukan sahaja akan melaksanakan arahan, tetapi juga melihat bagaimana arahan sudut mengendalikan perkara di belakang tabir.

mari kita mulakan dengan fail app.mycustomifdirective.ts kami:

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Seperti yang dapat kita lihat, kita menggunakan beberapa import yang berbeza untuk yang satu ini, terutamanya: Input, TemplateF dan ViewContainerRef. Penghias input digunakan untuk lulus data ke komponen. TemplateF ini digunakan untuk memberi pandangan pandangan tertanam. Pandangan tertanam mewakili sebahagian daripada susun atur yang akan diberikan, dan ia dikaitkan dengan templat. Akhirnya, ViewContainerRef adalah bekas di mana satu atau lebih pandangan boleh dilampirkan. Bersama -sama, komponen ini berfungsi seperti berikut:

Arahan Dapatkan akses ke bekas pandangan dengan menyuntik ViewContainerRef. Pandangan tertanam dicipta dan dilampirkan pada bekas pandangan dengan memanggil kaedah CreateembedDedView ViewContainerRef dan lulus dalam templat. Kami mahu menggunakan templat arahan kami dilampirkan sehingga kami lulus di TemplateF yang disuntik.

- dari latihan rangle.io's angular 2

Seterusnya, kami menambahkannya kepada pengisytiharan kami:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyErrorDirective } from './app.myerrordirective';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, MyErrorDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

dan kami menggunakannya dalam komponen kami:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

jenis pendekatan yang disediakan oleh arahan struktur boleh sangat berguna, seperti ketika kita perlu menunjukkan maklumat yang berbeza untuk pengguna yang berbeza berdasarkan keizinan mereka. Sebagai contoh, pentadbir tapak harus dapat melihat dan mengedit segala -galanya, sementara pengguna biasa tidak seharusnya. Jika kami memuatkan maklumat peribadi ke dalam DOM menggunakan arahan atribut, pengguna biasa dan semua pengguna untuk perkara itu akan mendapat akses kepadanya.

arahan sudut: atribut vs struktur

kami telah melihat atribut dan arahan struktur. Tetapi bilakah kita harus menggunakan satu atau yang lain?

Jawapannya mungkin mengelirukan dan kita boleh menggunakan yang salah hanya kerana ia menyelesaikan masalah kita. Tetapi ada peraturan mudah yang dapat membantu kita memilih yang betul. Pada asasnya, jika elemen yang mempunyai arahan itu masih berguna di DOM apabila DOM tidak dapat dilihat, maka kita pasti akan menyimpannya. Dalam kes ini, kami menggunakan arahan atribut seperti Tersembunyi. Tetapi jika elemen tidak menggunakannya, maka kita harus mengeluarkannya. Walau bagaimanapun, kita perlu berhati -hati untuk mengelakkan beberapa perangkap biasa. Kita perlu mengelakkan perangkap selalu menyembunyikan unsur -unsur hanya kerana ia lebih mudah. Ini akan menjadikan DOM lebih kompleks dan mungkin memberi kesan kepada prestasi keseluruhan. Perangkap sentiasa menghilangkan dan mencipta semula unsur -unsur juga harus dielakkan. Ia pasti lebih bersih, tetapi datang dengan mengorbankan prestasi.

Semua dalam semua, setiap kes harus dianalisis dengan teliti, kerana penyelesaian yang ideal adalah yang mempunyai kesan paling sedikit ke atas struktur, tingkah laku dan prestasi anda. Penyelesaian itu mungkin sama ada arahan atribut, arahan struktur atau, dalam senario yang paling biasa, kompromi antara kedua -dua mereka.

Kesimpulan

Dalam artikel ini, kami melihat arahan sudut, teras aplikasi sudut. Kami melihat pelbagai jenis arahan dan melihat bagaimana untuk mencipta yang sesuai dengan keperluan kami.

Saya harap artikel ini dapat membawakan anda dan berjalan dengan arahan sudut. Sekiranya anda mempunyai sebarang pertanyaan, jangan ragu untuk menggunakan bahagian komen di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Arahan Angular

Apakah jenis arahan sudut yang berbeza? Arahan komponen, seperti namanya, adalah arahan dengan templat. Mereka pada dasarnya adalah komponen sudut. Arahan atribut digunakan untuk mengubah tingkah laku, melihat, dan merasakan elemen DOM. Sebaliknya, arahan struktur digunakan untuk memanipulasi susun atur DOM dengan menambahkan, mengeluarkan, atau menggantikan unsur -unsur di dom.

Bagaimana saya membuat arahan tersuai dalam sudut?

Mewujudkan arahan tersuai dalam sudut melibatkan beberapa langkah. Pertama, anda perlu mengimport penghias arahan dari teras sudut. Kemudian, anda perlu menentukan kelas arahan dan menghiasi dengan penghias @directive. Hartanah pemilih dalam penghias harus sepadan dengan nama yang anda mahu gunakan untuk arahan anda. Akhirnya, anda perlu menambah arahan anda ke array pengisytiharan di ngmodule anda.

Bagaimana saya menggunakan arahan terbina dalam dalam sudut? dalam templat anda. Sebagai contoh, anda boleh menggunakan Arahan *NGIF untuk membuat unsur -unsur yang kondusif, atau Arahan *ngfor untuk memberikan senarai item. Untuk menggunakan arahan ini, anda hanya menambahkannya ke templat anda dengan sintaks yang sesuai.

Apakah perbezaan antara arahan dan komponen dalam sudut? arahan yang mempunyai templat dan terikat dengan pandangan tertentu. Sebaliknya, arahan adalah cara untuk menambah tingkah laku kepada elemen di DOM. Walaupun komponen digunakan untuk membuat widget UI, arahan digunakan untuk menambah tingkah laku kepada unsur -unsur yang ada. Dalam beberapa cara. Salah satu cara yang biasa adalah melalui pengikatan harta, di mana anda mengikat harta elemen DOM ke harta komponen anda. Anda juga boleh menggunakan peristiwa yang mengikat untuk bertindak balas terhadap tindakan pengguna, atau mengikat dua arah untuk memastikan model dan pandangan anda disegerakkan. Dalam sudut melibatkan membuat komponen ujian yang menggunakan arahan, dan kemudian menguji komponen tersebut. Anda boleh menggunakan utiliti testbed untuk membuat komponen ujian dinamik, dan kemudian gunakan komponenfixture untuk berinteraksi dengan komponen dan arahannya. > Ya, anda boleh menggunakan pelbagai arahan pada satu elemen dalam sudut. Walau bagaimanapun, anda harus sedar bahawa urutan di mana arahan digunakan boleh menjejaskan hasil akhir. Angular memohon arahan mengikut urutan yang disenaraikan dalam templat, jadi anda harus menyenaraikan arahan anda mengikut urutan yang anda mahu mereka digunakan. 🎜> Anda boleh lulus parameter ke arahan dalam sudut menggunakan penghias @input. Ini membolehkan anda mengikat harta arahan anda kepada nilai dalam komponen anda. Anda kemudian boleh menggunakan nilai ini di dalam arahan anda untuk mengawal kelakuannya. dalam modul bersama. Anda kemudiannya boleh mengimport modul bersama ini ke mana -mana modul lain di mana anda mahu menggunakan Arahan. Ini membolehkan anda menggunakan semula arahan yang sama merentasi pelbagai komponen atau modul.

Bagaimana saya boleh debug arahan dalam sudut? Alat ini membolehkan anda memeriksa komponen, arahan, dan perkhidmatan aplikasi anda, dan melihat keadaan dan kebergantungan semasa mereka. Anda juga boleh menggunakan konsol untuk berinteraksi dengan isu aplikasi dan debug anda.

Atas ialah kandungan terperinci Panduan praktikal untuk menggunakan dan membuat arahan sudut - sitepoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!