Analisis singkat tentang komponen independen di Angular dan lihat cara menggunakannya

Salah satu fitur menarik dari Angular 14 adalah komponen mandiri Angular akhirnya hadir.

Di Angular 14, pengembang dapat mencoba menggunakan komponen independen untuk mengembangkan berbagai komponen, namun perlu dicatat bahwa API komponen independen Angular masih belum stabil, dan mungkin ada beberapa pembaruan yang merusak di masa mendatang, sehingga tidak disarankan untuk digunakan dalam lingkungan produksi. [Rekomendasi tutorial terkait: "tutorial sudut"]

Cara membuat komponen independen.

Untuk komponen yang sudah ada, kita dapat menambahkan standalone: ​​​​true ke @Component() , lalu kita dapat menggunakan imports secara langsung tanpa @NgModule() Impor modul lain . Jika Anda membuat komponen baru, Anda dapat menggunakan perintah ng generate component <name> --standalone untuk langsung membuat komponen independen, misalnya:

ng generate komponen button-list --standalone

@Component({
  pemilih: 'daftar-tombol-aplikasi',  
  mandiri: benar,  
  impor: [
    Modul Umum,
  ],  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
kelas ekspor ButtonListComponent mengimplementasikan OnInit

mengimpor modul yang ada dalam komponen independen.

Kita dapat menambahkan modul yang ada di imports , dengan mengambil MatButtonModule sebagai contoh:

imports: [
    Modul Umum,
    Modul MatButton,
],

sehingga kita dapat menggunakan komponen mat-button dari MatButtonModule di ButtonListComponent :

<button mat-button>Basic</button>
<button mat-button color="primary">Utama</button>
<button mat-button color="accent">Aksen</button>
<button mat-button color="warn">Peringatkan</button>
<button mat-button dinonaktifkan>Dinonaktifkan</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Tautan</a>

Rendering:

untuk memulai aplikasi Angular menggunakan komponen independen

adalah menyetel AppComponent sebagai komponen independen:

@Component({
  pemilih: 'root-aplikasi',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  mandiri: benar,
})
ekspor kelas AppComponent {

Langkah kedua adalah menambahkan modul yang diimpor dalam impor AppModule ke impor AppComponent , tetapi ada dua pengecualian modul: BrowserModule dan BrowserAnimationsModule .

Jika diimpor, hal ini dapat menimbulkan masalah: ** BrowserModule telah dimuat. Jika Anda memerlukan akses ke arahan umum seperti NgIf dan NgFor, impor CommonModule saja.**:

Langkah ketiga adalah menghapus file app.module.ts .

Langkah terakhir adalah melakukan import di main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

diubah menjadi:

bootstrapApplication(AppComponent).catch(err => console.error(err));

Dengan cara ini, kita dapat menggunakan komponen independen untuk memulai komponen Angular.

Konfigurasikan perutean untuk komponen independen.

Saya memiliki tiga komponen independen di sini: HomeComponent , ButtonListComponent dan ChipListComponent ,

lalu buat objek ROUTES const ROUTES di main.ts

: Route[] = [
  {
      jalur: '',    
      pathMatch: 'penuh',    
      redirectTo: 'rumah'
  },
  {
      jalur: 'rumah',    
      komponen: Komponen Rumah
  },
  {
      jalur: 'tombol',    
      komponen beban: () =>
            import('./app/button-list/button-list.component').then(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      jalur: 'chip',    
      komponen beban: () =>  
          import('./app/chip-list/chip-list.component').then(
                  (mod) => mod.ChipListComponent
          ),
  },
];

Diantaranya, ButtonListComponent dan ChipListComponent menggunakan loadComponent untuk mengimplementasikan pemuatan rute yang lambat.

Kemudian gunakan providers untuk mendaftarkan RouterModule di parameter kedua bootstrapApplication .

bootstrapApplication(Komponen Aplikasi, {
  penyedia: [
    importProvidersFrom(RouterModule.forRoot([...RUTE])),
  ],
}).catch(err => console.error(err))

;

Mengonfigurasi Injeksi Ketergantungan

Saat kita ingin memulai aplikasi Angular, kita mungkin perlu memasukkan beberapa nilai atau layanan. Di bootstrapApplication , kita dapat mendaftarkan nilai atau layanan melalui providers .

Misalnya, saya memiliki url untuk mendapatkan gambar, yang perlu dimasukkan ke dalam PhotoService :

bootstrapApplication(AppComponent, {
  penyedia: [
    {
          berikan: 'photoUrl',      
          useValue: 'https://picsum.photos',
    },
    {provide: PhotosService, useClass: PhotosService },
    importProvidersFrom(RouterModule.forRoot([...RUTE])),
    importProvidersFrom(HttpClientModule)
  ],
})

Kode PhotoService adalah sebagai berikut:

@Injectable()export class PhotosService {
  konstruktor(
    @Inject('photoUrl') photoUrl pribadi: string,
    http pribadi: HttpClient ) {}

  getPhotoUrl publik(i: angka): string {
      kembalikan `${ini.photoUrl}/200/300?random=${i}`;
  }
}

sumber Kode sumber

yang digunakan dalam artikel ini: https://github.com/damingerdai/angular-standalone-components-app

Demo online: https://damingerdai.github.io/angular-standalone-components-app/Original

text Alamat: https://juejin.cn/post/7107224235914821662