Analisis ringkas komponen bebas dalam Angular dan lihat cara menggunakannya

Artikel ini akan membawa anda melalui komponen bebas dalam Angular, cara mencipta komponen bebas dalam Angular dan cara mengimport modul sedia ada dalam komponen bebas saya harap ia akan membantu semua orang. !

Ciri menarik Angular 14 ialah komponen bebas Angular akhirnya berada di sini.

Dalam Angular 14, pembangun boleh cuba menggunakan komponen bebas untuk membangunkan pelbagai komponen, tetapi perlu diperhatikan bahawa API komponen bebas Angular masih tidak stabil, dan mungkin terdapat beberapa kemas kini yang merosakkan pada masa hadapan, jadi ia tidak digalakkan digunakan dalam persekitaran pengeluaran. [Cadangan tutorial berkaitan: "tutorial sudut"]

Cara mencipta komponen bebas

Untuk komponen sedia ada, kami boleh @Component() Tambah berdiri sendiri: ​​benar, dan kemudian kami boleh terus menggunakan @NgModule() untuk mengimport modul lain tanpa imports. Jika anda mencipta komponen baharu, anda boleh menggunakan perintah ng generate component <name> --standalone</name> untuk mencipta komponen bebas secara terus, contohnya:

ng generate component button-list --standalone

@Component({
  selector: 'app-button-list',  
  standalone: true,  
  imports: [
    CommonModule,
  ],  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
export class ButtonListComponent implements OnInit

Import modul sedia ada dalam komponen bebas

Kita boleh menambah modul sedia ada dalam imports, ambil MatButtonModule sebagai contoh:

imports: [
    CommonModule,
    MatButtonModule,
],

Dengan cara ini, kita boleh menggunakan ButtonListComponent's MatButtonModule > Komponen: mat-button

<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>

Rendering:

Gunakan komponen bebas untuk memulakan aplikasi Angular

Tidak. Langkah pertama, tetapkan

sebagai komponen bebas: AppComponent

@Component({
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  standalone: true,
})
export class AppComponent {

Langkah kedua, tambahkan modul yang diimport dalam import

kepada import AppModule, tetapi terdapat dua modul Pengecualian: AppComponent dan BrowserModule. BrowserAnimationsModule

Jika diimport, ia mungkin menyebabkan **

telah pun dimuatkan Jika anda memerlukan akses kepada arahan biasa seperti NgIf dan NgFor, import BrowserModule sebaliknya.** masalah: CommonModule<.>

Langkah ketiga ialah memadam fail

app.module.tsLangkah terakhir ialah menukar perkataan dalam

:

main.ts

kepada:

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

Dengan cara ini, kita boleh memulakan komponen Sudut menggunakan komponen bebas.

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

Konfigurasikan penghalaan untuk komponen bebas

Saya mempunyai tiga komponen bebas di sini:

,

dan HomeComponent, ButtonListComponentChipListComponent kemudian Cipta objek

ROUTES

main.ts dalam

, di mana

const ROUTES: Route[] = [
  {
      path: '',    
      pathMatch: 'full',    
      redirectTo: 'home'
  },
  {
      path: 'home',    
      component: HomeComponent
  },
  {
      path: 'button',    
      loadComponent: () =>
            import('./app/button-list/button-list.component').then(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      path: 'chip',    
      loadComponent: () =>  
          import('./app/chip-list/chip-list.component').then(
                  (mod) => mod.ChipListComponent
          ),
  },
];

dan

menggunakan ButtonListComponent untuk melaksanakan pemuatan malas laluan. ChipListComponentloadComponent Kemudian gunakan

untuk mendaftar

dalam parameter kedua bootstrapApplication. providersRouterModule

Rendering:

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
  ],
}).catch(err => console.error(err));

Mengkonfigurasi Suntikan Ketergantungan

Apabila kita ingin memulakan aplikasi Sudut Kadangkala , anda mungkin perlu menyuntik beberapa nilai atau perkhidmatan. Dalam

, kami boleh mendaftarkan nilai atau perkhidmatan melalui

. bootstrapApplicationprovidersSebagai contoh, saya mempunyai url untuk mendapatkan gambar, yang perlu disuntik ke dalam

:

PhotoService

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

Kodnya adalah seperti berikut:

PhotoService

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

  public getPhotoUrl(i: number): string {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

Kod sumber

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

Demo dalam talian : https:// damingerdai.github.io/angular-standalone-components-app/

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

Lebih banyak pengaturcaraan berkaitan Untuk pengetahuan, sila layari:

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Analisis ringkas komponen bebas dalam Angular dan lihat cara menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!