Pembelajaran sudut bercakap tentang komponen kendiri (Komponen Kendiri)

Artikel ini akan membawa anda untuk terus belajar sudut dan memahami secara ringkas komponen kendiri (Komponen Kendiri) dalam Sudut Saya harap ia akan membantu anda!

Ciri menarik Angular 14 ialah Komponen Kendiri Angular akhirnya ada di sini. [Cadangan tutorial berkaitan: "tutorial sudut"]

Dalam Angular 14, pembangun boleh cuba menggunakan komponen bebas untuk membangunkan pelbagai komponen, tetapi perlu diperhatikan bahawa API komponen bebas Angular masih Tanpa penstabilan, mungkin terdapat beberapa kemas kini yang merosakkan pada masa hadapan, jadi ia tidak disyorkan untuk digunakan dalam persekitaran pengeluaran.

Penggunaan asas

angular.io/guide/stand…

standalone dilancarkan dalam Angular14 ciri baharu.

Ia boleh menjadikan modul root anda AppModule tidak begitu kembung

Semua komponen / paip / arahan harus diperkenalkan dalam komponen yang sepadan apabila ia digunakan

Sebagai contoh, ini kaedah penulisan sebelumnya. Kami mengisytiharkan komponen Footer

dan kemudian mengimport komponen ini dalam Module

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

@Component({
  selector: 'app-footer',
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [HomeComponent, FooterComponent],
  exports: [],
  imports: [CommonModule],
})
export class AppModuleModule {}

kaedah penulisan ini membawa kepada kami jangan sekali-kali membuang NgModule

tetapi sebenarnya niat kami adalah untuk menggunakan AppComponentFooterComponent

dalam

dan menggantikannya dengan kaedah penulisan dalam React yang sebenarnya akan membuatnya. lebih mudah diurus dan difahami

Gunakan ciri baharu kamistandalone

Komponen Footer diubah seperti ini

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

@Component({
  selector: 'app-footer',
  // 将该组件声明成独立组件
  standalone: true,
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

Kemudian sebagai contoh di halaman Utama kita boleh gunakan ia seperti ini

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

import { FooterComponent } from '@components/footer/footer.component';

@Component({
  selector: 'app-home',
  standalone: true,
  // 声明需要使用的 component / pipe / directive 但是它们也必须都是独立组件
  imports: [FooterComponent],
  template: `<app-footer></app-footer>`,
})
export class WelcomeComponent {}

Komponen bebas boleh digunakan terus untuk pemuatan malas Pada asalnya kami terpaksa menggunakan NgModule untuk mencapai

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CustomPreloadingStrategy } from '@views/basic-syntax/router/customPreloadingStrategy';

const routes: Routes = [
  {
    path: 'home',
    // 之前想要实现懒加载 这里必须是一个NgModule 现在使用独立组件也可以 并且更加简洁
    loadComponent: () => import('@views/home/home.component').then((mod) => mod.HomeComponent),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari: <.>Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang komponen kendiri (Komponen Kendiri). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!