Mari kita bincangkan tentang cara mencipta dan menggunakan komponen bebas mudah dalam Angular

Artikel ini akan membawa anda melalui komponen bebas dalam Angular, memperkenalkan cara mencipta komponen bebas mudah dan cara menggunakannya dalam aplikasi Angular saya harap ia akan membantu anda!

Jika anda belajar Angular, maka anda mungkin pernah mendengar tentang komponen bebas (Komponen). Seperti namanya, komponen bebas ialah komponen yang boleh digunakan dan diuruskan secara bebas Ia boleh dimasukkan atau dirujuk oleh komponen lain.

Buat komponen

Untuk mencipta komponen Sudut, anda perlu menggunakan alat CLI Sudut dahulu untuk menjana rangka komponen kosong. Katakan kita ingin mencipta komponen bernama hello-world, kita boleh menjalankan arahan berikut:

ng generate component hello-world

Arahan ini akan menjana folder hello-world secara automatik, yang mengandungi semua fail yang diperlukan oleh komponen, seperti sebagai kelas Komponen, templat HTML dan helaian gaya. [Cadangan tutorial berkaitan: "tutorial sudut"]

Kini kami boleh mengedit fail hello-world.component.ts untuk mentakrifkan kelas komponen kami. Contoh kod berikut menunjukkan definisi komponen minimum:

import { Component } from '@angular/core';

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>Hello World!</p>&#39;,
})
export class HelloWorldComponent {
}

Dalam takrifan komponen ini, kami menggunakan penghias @Component untuk menentukan pemilih komponen, iaitu komponen ialah Nama teg dalam templat. Pada masa yang sama, kami juga menentukan templat HTML komponen, yang hanya memaparkan teg perenggan "Hello World!"

Seterusnya, kita boleh mengubah suai fail app.component.html untuk menggunakan komponen baharu ini. Cuma tambahkan tag <app-hello-world> ke lokasi yang sesuai dalam fail.

<app-hello-world></app-hello-world>

Sekarang buka apl dan anda sepatutnya dapat melihat "Hello World!"

Input komponen

Apabila menggunakan komponen, biasanya kita perlu menghantar beberapa data kepadanya, yang boleh dicapai melalui sifat input komponen tersebut.

Untuk menentukan sifat input komponen, tentukan sifat dengan @Input() penghias dalam kelas komponen. Sebagai contoh, katakan kita mahu menetapkan mesej komponen kepada nilai yang dibekalkan pengguna:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>{{message}}</p>&#39;,
})
export class HelloWorldComponent {
    @Input() message: string;
}

Dalam HelloWorldComponent yang diubah suai ini, kami telah menambah atribut input message dan menggunakannya dalam templat Ia memaparkan mesej.

Kini apabila menggunakan komponen ini kita boleh menghantar mesej kepadanya sebagai sifat. Contohnya:

<app-hello-world message="Welcome to my app!"></app-hello-world>

Output komponen

Sama seperti sifat input, komponen juga boleh berkomunikasi dengan komponen lain melalui peristiwa output. Untuk menentukan acara keluaran, gunakan @Output() penghias dan kelas EventEmitter.

Sebagai contoh, andaikan kita ingin mencipta butang dalam komponen dan mencetuskan peristiwa apabila butang itu diklik, kita boleh mentakrifkannya seperti berikut:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-button-with-click-event',
    template: &#39;<button (click)="onClick()">Click me</button>&#39;,
})
export class ButtonWithClickEventComponent {
    @Output() buttonClick = new EventEmitter<any>();

    onClick(): void {
        this.buttonClick.emit();
    }
}

Dalam komponen ini, kita cipta atribut output buttonClick, dan acara dicetuskan dalam kaedah onClick().

Sekarang, apabila menggunakan komponen ini, kita hanya perlu mendengar acara buttonClicknya:

<app-button-with-click-event (buttonClick)="onButtonClick()"></app-button-with-click-event>

Akhir sekali, laksanakan kaedah onButtonClick() dalam komponen induk untuk bertindak balas kepada peristiwa Sekiranya .

Dalam catatan blog ini, kami menyelami konsep komponen kendiri Sudut dan cara mencipta dan menggunakannya. Kami mula-mula memperkenalkan komponen bebas dan sebab kami menggunakan komponen bebas Angular.

Kami terus meneroka cara Angular CLI membantu kami mencipta komponen kendiri baharu dengan mudah dan membincangkan cara menggunakan input, output dan acara untuk menjadikan komponen lebih fleksibel dan serba boleh.

Akhir sekali, kami menekankan kepentingan kaedah pengaturcaraan modular dalam komponen bebas Sudut. Dengan membahagikan aplikasi kepada komponen kecil dan bebas, kami boleh mengurus asas kod dengan lebih baik dan mencapai kod yang lebih mudah dibaca dan boleh diselenggara.

Dengan contoh kod dalam bab, kami boleh mula membina komponen bebas kami sendiri dan menambah lebih banyak fungsi dan kebolehgunaan semula pada aplikasi kami.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara mencipta dan menggunakan komponen bebas mudah dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!