تفسير وتوضيح ميزة Multi-level Injector في Angular2 مع أمثلة

يحتوي تعليمات Angular2 على الكثير من المعلومات، ويعد من بين هذه المعلومات مكون التدفق الديناميكي، وهو صعب الفهم، اليوم لن نتعمق في محتوى مكون التدفق الديناميكي، يمكنكم الرجوع إلى الوثائق الرسمية، اليوم سنتحدث عن مستوى مكون التدفق الديناميكي.

هذا يعني أن وعاء الحصول على الخدمة للمكون سيختار أي واحد منهم.

دعنا نقدم ببساطة بعض الخلفيات: هناك 3 عناصر AppComponent هي العنصر الجذر، عنصر DetailList (مكون قائمة السجلات)، وعنصر Detail (مكون السجل).

هذه العناصر الثلاث ستكون شجرة العناصر، ويمكننا الافتراض أيضًا أن كل عنصر سيكون له محول مستقل (قد لا يحدث دائمًا، ولكن يمكننا الافتراض ذلك).

إضافة خدمة سجلات LoggerService، إذا تمت إضافتها بنفس الطريقة التي نبدأ بها، في Providers في وحدة الجذر، فإن LoggerService سيكون لديه نموذج واحد فقط في كل تطبيق، ما يعني ذلك؟ أي أن، بغض النظر عن أي عنصر، سيتم الحصول على LoggerService الذي تم إنشاؤه لأول مرة، وستشارك جميع العناصر نفس نموذج الخدمة، مما قد يكون ميزة مفيدة، مثل إعداداتنا العالمية.

الشيء الوحيد الذي هو عالمي وليس نقطة focus في هذه المرة هو أنه شائع جدًا، ونريد أن نوضح كيف يمكننا الحصول على نموذج LoggerService الفريد في كل عنصر، أي أن كل نموذج من العناصر له نموذج مختلف. هذا يتطلب فهمًا لتصريف الاعتماد في ng2.

سنتحدث خطوة بخطوة عن كيفية تحقيق ذلك؟

لإعطاء بعض المعرفة للطلاب الذين يرغبون في رؤية هذا النص، قمت بإضافة بعض الكود الأساسي.

1.app.module.ts هي وحدة جذر التطبيق. يرجى ملاحظة أنه لم يتم تسجيل loggerService في Providers هنا. بالطبع، يمكننا الوصول إلى الهدف من خلال الطريقة التالية.

استيراد {NgModule, Optional, SkipSelf, ReflectiveInjector} من '@angular/core';
استيراد {BrowserModule} من '@angular/platform-browser';
/* جذر التطبيق */
استيراد {AppComponent} من './app.component';
استيراد {routing} من './app.routing';
import { Title } from '@angular/platform-browser';
استيراد {MessagesModule, GrowlModule, ButtonModule} من 'primeng/primeng';
استيراد {AppDetailComponent} من './app-detail.component';
استيراد {AppDetailListComponent} من './app-detailList.component';
import {LoggerService}from './logger.service';
let allTitle:string="郭志奇";
@NgModule({
 imports: [
 BrowserModule,
 MessagesModule,
 GrowlModule, ButtonModule
 ],
 declarations: [AppComponent, AppDetailComponent, AppDetailListComponent],//إعلان المعلومات المحددة للمكونات المطلوبة في هذا المodule
 exports: [],
 providers: [Title],
 bootstrap: [AppComponent]
})
export class AppModule {
 constructor( @Optional() @SkipSelf() parentModule: AppModule) {
 console.log(parentModule);
 if (parentModule) {
  throw new Error(
  'AppModule is already loaded. Import it in the AppModule only');
 }
 }
}

2.app.component.ts　 التطبيق الجذر

import { Component, ViewEncapsulation, Host, ViewContainerRef, ReflectiveInjector } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Message } from 'primeng/primeng';
import {LoggerService}from './logger.service';
@Component({
 selector: 'my-app',
 moduleId: module.id,
 templateUrl: './app.component.html',
 providers: [
  { provide: LoggerService, useClass: LoggerService }
 ]
})
export class AppComponent {
 subtitle = '(Final)';
 private msgs: Message[];
 constructor(private title: Title, @Host() private logger: LoggerService) {
  this.title.setTitle("AppComponent");
 }
 show(): void {
  this.logger.Debug();
 }
}

يرجى ملاحظة أننا قمنا بتسجيل LoggerService في providers للمكون الجذر.

3.app.detailList.ts تم تسجيل LoggerService في providers للقائمة البرمجية.

import {Component, Host}from '@angular/core';
import {LoggerService}from './logger.service';
@Component({
 selector: 'my-detailList',
 templateUrl: './app-detailList.component.html',
 moduleId: module.id,
 providers: [
  { provide: LoggerService, useClass: LoggerService }
 ]
})
export class AppDetailListComponent {
 constructor( private logger: LoggerService) {
 }
 show(): void {
  this.logger.Debug();
 }
}

　4.app.detail.ts لم يتم تسجيل LoggerService في providers للوحدة البرمجية.

import {Component, Host}from '@angular/core';
import {LoggerService}from './logger.service';
@Component({
 selector: 'detail',
 moduleId: module.id,
 templateUrl: './app-detail.component.html',
 providers: [
  // { provide: LoggerService, useClass: LoggerService }
 ]
})
export class AppDetailComponent {
 constructor( private logger: LoggerService) {
 }
 show(): void {
  this.logger.Debug();
 }
}

　الآن دعونا نرى علاقات LoggerService باستخدام Chrome.

　

من خلال النظر في رسم علاقات الاعتماد، يمكننا رؤية أن مكون AppComponent يستخدم LoggerService منفرد، ومكون DetailList يستخدم مثيل LoggerService منفرد، بينما يستخدم مكون Detail مثيل LoggerService من مكون DetailList الأم.

حتى الآن لم نحقق متطلباتنا، متطلباتنا هي أن يكون لدى كل مكون مثيل منفرد من LoggerService، لنفترض أن providers لـ مكون Detail قد نسيته إدخالها، سيكون من الصعب اختبار السبب. لذا قمنا بإضافة @Host() لتقييد نطاق البحث لأجهزة التدفق.

للتحقق من طريقة البحث لأجهزة التدفق، يرجى الرجوع إلى الوثائق الرسمية.

لإجراء الت调试 بشكل أسهل، قمنا بإضافة @Host().

@Host مُعزز سيقوم بإنهاء البحث إلى مكون المستضيف

detail.ts إنه يُشير إلى أن مكون detail يتم إضافته إلى مُعزز @Host().

import {Component, Host}from '@angular/core';
import {LoggerService}from './logger.service';
@Component({
 selector: 'detail',
 moduleId: module.id,
 templateUrl: './app-detail.component.html',
 providers: [
  // { provide: LoggerService, useClass: LoggerService }
 ]
})
export class AppDetailComponent {
 constructor( @Host() private logger: LoggerService) {
 }
 show(): void {
  this.logger.Debug();
 }
}

سيتم إعلامك بأن لا يمكن العثور على مثيل LoggerService، والهدف من @Host() هو تقييد محاولات المحقن للبحث عن المكون الحالي فقط وليس المستمر للبحث. لذا قد تظهر أخطاء حول عدم العثور على Providers

بإضافة providers نحصل على النتيجة التي نريدها

　

حل المشكلة المثالية في استخدام خدمات المكونات الفردية لكل مكون

　الخلاصة:

1. إذا كنت ترغب في استخدام خدمة المكون بشكل مستقل، فإنه يجب أولاً تسجيل الخدمة في providers. من السهل فهم ذلك

2. لتحسين إمكانية اكتشاف المشاكل المحتملة، أضف ديكوراتور @Host() على خدمة المكون، مما يمكن أن يلقي بسرعة خطأ معلومات

3. استخدم أدوات التشخيص في ng2

4. يجب توضيح علاقات المكونات المختلفة، لأن علاقات المكونات المختلفة يمكن أن تؤدي إلى اختلاف حالات الاستدعاء للخدمات

5. يجب أن تكون الخدمات على مستوى المodule وليس على مستوى التطبيق.

شكراً على القراءة، آمل أن تكون مفيدة للجميع، شكراً لدعمكم لموقعنا!