تحليل موجز للمكونات المستقلة في Angular ومعرفة كيفية استخدامها

إحدى الميزات المثيرة في Angular 14 هي أن مكونات Angular المستقلة أصبحت موجودة أخيرًا.

في Angular 14، يمكن للمطورين محاولة استخدام مكونات مستقلة لتطوير مكونات مختلفة، ولكن تجدر الإشارة إلى أن واجهة برمجة التطبيقات (API) للمكونات المستقلة Angular لا تزال غير مستقرة، وقد تكون هناك بعض التحديثات المدمرة في المستقبل، لذلك لا يوصى بها استخدامها في بيئة الإنتاج. [توصية برنامج تعليمي ذي صلة: "البرنامج التعليمي الزاوي"]

كيفية إنشاء مكون مستقل.

بالنسبة للمكونات الموجودة، يمكننا إضافة مستقل: صحيح إلى @Component() ، وبعد ذلك يمكننا استخدام imports مباشرة بدون @NgModule() استيراد وحدات أخرى . إذا كنت تقوم بإنشاء مكون جديد، فيمكنك استخدام الأمر ng generate component <name> --standalone لإنشاء مكون مستقل مباشرة، على سبيل المثال:

ng generator Componon-list --standalone

@Component({
  المحدد: "قائمة زر التطبيق"،  
  مستقل: صحيح،  
  الواردات: [
    وحدة مشتركة,
  ]،  
  templateUrl: './button-list.component.html'،  
  styleUrls: ['./button-list.component.scss']
})
فئة التصدير ButtonListComponent تنفذ OnInit

وتقوم باستيراد الوحدات الموجودة في مكونات مستقلة،

ويمكننا إضافة الوحدات الموجودة في imports ، مع أخذ MatButtonModule كمثال:

imports: [.
    وحدة مشتركة,
    ماتبوتونمودول,
]،

حتى نتمكن من استخدام مكون mat-button في MatButtonModule في ButtonListComponent :

<button mat-button>Basic</button>
<button mat-button color="primary">أساسي</button>
<button mat-button color="accent">لكنة</button>
<button mat-button color="warn">تحذير</button>
<button mat-button تعطيل>معطل</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">الرابط</a>

العرض:

لبدء تطبيق Angular باستخدام مكونات مستقلة

هي تعيين AppComponent كمكون مستقل:

@Component({
  المحدد: "جذر التطبيق"،  
  templateUrl: './app.component.html'،  
  styleUrls: ['./app.component.scss']،  
  مستقل: صحيح،
})
فئة التصدير AppComponent {

الخطوة الثانية هي إضافة الوحدات النمطية المستوردة في واردات AppModule إلى واردات AppComponent ، ولكن هناك استثناءان للوحدة: BrowserModule و BrowserAnimationsModule .

إذا تم استيراده، فقد يتسبب ذلك في حدوث مشكلات: ** لقد تم بالفعل تحميل BrowserModule إذا كنت بحاجة إلى الوصول إلى التوجيهات الشائعة مثل NgIf وNgFor، فاستورد CommonModule بدلاً من ذلك.**:

الخطوة الثالثة هي حذف ملف app.module.ts .

الخطوة الأخيرة هي الاستيراد في main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
منصةBrowserDynamic().bootstrapModule(AppModule)
  

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

إلى

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

بهذه الطريقة، يمكننا استخدام مكونات مستقلة لبدء المكونات Angular.

قم بتكوين التوجيه للمكونات المستقلة،

لدي ثلاثة مكونات مستقلة هنا: HomeComponent و ButtonListComponent و ChipListComponent ،

ثم قم بإنشاء كائن ROUTES const ROUTES في main.ts

: Route[] = [.
  {
      طريق: ''،    
      pathMatch: "كامل"،    
      إعادة التوجيه إلى: "المنزل"
  },
  {
      المسار: "المنزل"،    
      المكون: المكون المنزلي
  },
  {
      المسار: "زر"،    
      مكون التحميل: () =>
            استيراد ('./app/button-list/button-list.component').ثم (
                    (mod) => mod.ButtonListComponent
            )،
  },
  {
      المسار: "رقاقة"،    
      مكون التحميل: () =>  
          استيراد ('./app/chip-list/chip-list.component').ثم (
                  (mod) => mod.ChipListComponent
          )،
  },
];

من بينها، ButtonListComponent و ChipListComponent يستخدمان loadComponent لتنفيذ التحميل البطيء للمسارات.

ثم استخدم providers لتسجيل RouterModule في المعلمة الثانية لـ bootstrapApplication .

bootstrapApplication(AppComponent, {
  مقدمي الخدمة: [
    importProvidersFrom(RouterModule.forRoot([...الطرق])))،
  ]،

=

> console.error(err));

تكوين حقن التبعية

عندما نريد بدء تطبيق Angular، قد نحتاج إلى حقن بعض القيم أو الخدمات. في bootstrapApplication ، يمكننا تسجيل القيم أو الخدمات من خلال providers .

على سبيل المثال، لدي عنوان url للحصول على الصور، والذي يجب إدخاله في PhotoService :

bootstrapApplication(AppComponent, {
  مقدمي الخدمة: [
    {
          تقديم: "photoUrl"،      
          قيمة الاستخدام: "https://picsum.photos"،
    },
    {توفير: PhotosService، UseClass: PhotosService }،
    importProvidersFrom(RouterModule.forRoot([...الطرق])))،
    importProvidersFrom(HttpClientModule)
  ]،
})

رمز PhotoService هو كما يلي:

@Injectable()export class PhotosService {
  منشئ(
    @Inject('photoUrl') photoUrl الخاص: سلسلة،
    http الخاص: HttpClient ) { }

  getPhotoUrl العامة (i: number): سلسلة {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

كود المصدر

كود المصدر المستخدم في هذه المقالة: https://github.com/damingerdai/angular-standalone-components-app

العرض التوضيحي عبر الإنترنت: https://damingerdai.github.io/angular-standalone-components-app/

النص

العنوان: https://juejin.cn/post/7107224235914821662