Satu Lagi Artikel Sudut, penciptaan komponen Bahagian

Dalam artikel sebelum ini, saya hanya bercakap tentang penciptaan projek. Maksud saya, projek utama, bukan sub-projek. Perkara itu akan menjadi subjek artikel akan datang.

Hari ini berkaitan dengan penciptaan komponen. Dan seperti penciptaan projek, Angular CLI ialah kawan baik anda. Jadi pergi dengan :

 
ng menjana komponen hello-world

Ia menjalankan penjanaan kod dalam folder my-new-project/src/app/hello-world dengan 4 fail :

• hello-world.component.html : templat
• hello-world.component.scss : gaya, dalam format scss kerana ini adalah pilihan saya pada gesaan penciptaan projek
• hello-world.component.spec.ts : fail ujian
• hello-world.component.ts : komponen

Sekarang jalankan servis dan buka penyemak imbas ke localhost:4200 untuk melihat hasilnya
Hei, tetapi komponen itu tidak dipaparkan ! Mengapa ?
Kerana kami tidak menggunakannya :-)

Sekarang buka komponen akar 'app.component.ts' dan tambah HelloWorlComponent dalam bahagian 'import' :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@Component({
 selector: 'app-root',
 imports: [RouterOutlet, HelloWorldComponent],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {
 title = 'angular-tutorial';
}

Komponen tersebut kini tersedia dalam AppComponent, dan kami boleh menggunakannya. Cuma edit fail hello-world.component.html dan gantikan semua kod dengan ini :

<app-hello-world></app-hello-world>
<router-outlet />

Lupakan saluran keluar penghala misalnya kerana kami tidak menghalang pemasangan Penghala Sudut pada penciptaan projek (jika anda tidak mahu penghalaan, anda boleh melakukan ini : ng new my-new-project --routing=false )

Awalan pemilih lalai ialah 'apl', itulah sebabnya pemilih komponen ialah 'app-hello-world'

Semak penyemak imbas dan anda akan melihat kandungan lalai komponen anda.

Anda boleh menyesuaikan css dengan menambahkan ini pada hello-world.component.scss :

:host {
 color: blueviolet
}

Periksa penyemak imbas dan anda akan melihat warna baharu teks. Pemilih :host berkaitan dengan komponen hello-world semasa.

Jadi sekarang, anda tahu cara menjana komponen mudah

Semoga hari yang menyenangkan ?

[siaran asal] https://rebolon.medium.com/yet-another-angular-article-part-2-components-creation-550c14b991a2

Atas ialah kandungan terperinci Satu Lagi Artikel Sudut, penciptaan komponen Bahagian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!