التعلم الزاوي باستخدام تلميح الأدوات كمثال لفهم التعليمات المخصصة

في المقالات السابقة، قدمنا ​​لمحة عامة عن Angular . في جزء التعليمات المخصصة، تمكنا من كتابتها، ولكن في السيناريوهات الفعلية، ما زلنا بحاجة إلى إدارة موحدة.

Angular هي نسخة مطورة من Angular.js. [برامج تعليمية ذات صلة موصى بها: "Angular Tutorial"]

لذا، في هذه المقالة، سنستخدم Tooltip لشرح محتوى التعليمات المخصصة.

العروض عبر الإنترنت، على النحو التالي:

بنية الدليل

على مشروع التعليمات البرمجية الذي تم تنفيذه في المقالة السابقة، قم بتنفيذ سطر الأوامر:

# أدخل توجيهات مجلد التوجيهات $ cd

# إنشاء مجلد تلميح الأدوات$ mkdir tooltip

# أدخل مجلد تلميح الأدوات $ cd Tooltip

# إنشاء مكون تلميح الأدوات $ ng إنشاء تلميح أدوات المكون

# إنشاء توجيه تلميح الأدوات $ ng إنشاء تلميح أدوات التوجيه

بعد تنفيذ سطر الأوامر أعلاه، ستحصل على بنية دليل الملف app/directive/tooltip كما يلي:

تلميح الأداة
├── تلميح الأداة // مكون تلميح الأداة │ ├── user-list.component.html // هيكل الصفحة │ ├── user-list.component.scss // نمط فريد للصفحة │ ├── user-list.component .ts // ملف الاختبار │ └── user-list.component.ts // ملف جافا سكريبت ├── tooltip.directive.spec.ts // ملف الاختبار └── tooltip.directive.ts // ملف التوجيه

حسنًا، هنا أضع المكون على نفس مستوى tooltip ، وذلك لتسهيل الإدارة بشكل أساسي. بالطبع هذا يختلف من شخص لآخر، يمكنك وضعه في مجلد components العامة.

اكتب مكون تلميح الأداة

في ملف html :

<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div>

في ملف النمط .scss ، يوجد:

$black: #000000;
$ الأبيض: #ffffff؛
حجم علامة الإقحام $: 6 بكسل؛
$tooltip-bg:transparentize($black, 0.25);//transparentize هو بناء جملة sass $grid-gutter-width: 30px;
$body-bg-color: $white;
$app-anim-time: 200 مللي ثانية؛
$app-anim-curve: سهولة الخروج؛
$std-border-radius: 5px;
$زيندكس-ماكس: 100؛

// : مُحدد الفئة الزائفة للمضيف، يضبط نمط العنصر المكون نفسه: host {
  الموقف: ثابت؛
  الحشو: $grid-gutter-width/3 $grid-gutter-width/2;
  لون الخلفية: $tooltip-bg;
  اللون: $body-bg-color؛
  العتامة: 0؛
  الانتقال: كل $app-anim-time $app-anim-curve؛
  محاذاة النص: مركز؛
  نصف قطر الحدود: نصف قطر الحدود std؛
  فهرس z: $zindex-max؛
}

.علامة الإقحام { // عرض علامة الإقحام: 0؛
  الارتفاع: 0;
  الحد الأيسر: 6 بكسل شفاف خالص؛
  الحدود اليمنى: 6 بكسل شفافة صلبة؛
  الحد السفلي: 6px صلب $tooltip-bg;
  الموقف: مطلق؛
  أعلى: -$حجم الإقحام؛
  اليسار: 50%؛
  الهامش الأيسر: -$حجم الإقحام/2;
  لون الحدود السفلية: $tooltip-bg;
}

حسنًا~، css شيء سحري، وسأقوم بترتيب مقال لشرح المحتوى المتعلق بـ sass ...

ثم، محتوى ملف javascript tooltip.component.ts هو كما يلي:

import { 
  عنصر، 
  ElementRef، // يشير العنصر إلى HostBinding، 
  على التدمير, 
  OnInit 
} من '@angular/core';

@عنصر({
  المحدد: 'app-tooltip'، // المعرف، الذي يشير إلى اسم المكون الخاص بي، هنا تلميح أداة التطبيق
  templateUrl: './tooltip.component.html', // الهيكل العظمي لهذا المكون styleUrls: ['./tooltip.component.scss'] // النمط الخاص لهذا المكون})
فئة التصدير TooltipComponent تنفذ OnInit {

  البيانات العامة: أي // تعيين قيمة للتوجيه عرض خاص TimeOut: أي؛

  // المزخرف المتعلق بربط المضيف للمكون نفسه @HostBinding('style.top') hostStyleTop!: string;
  @HostBinding('style.left') hostStyleLeft!: string;
  @HostBinding('style.opacity') hostStyleOpacity!: string;

  منشئ(
    العنصر الخاص: ElementRef
  ) { }

  ngOnInit (): باطل {
    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    إذا (هذا.displayTimeOut) {
      ClearTimeout(this.displayTimeOut)
    }

    this.displayTimeOut = setTimeout((_: أي) => {
      // احسب المسافة بين تلميح الأداة والجانب الأيسر هنا. صيغة الحساب هنا هي: tooltip.left + .width للعنصر المستهدف - (tooltip.width/2)
      this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'
      this.hostStyleOpacity = '1';
      this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'
    }، 500)
  }
  
  
  // تم تدمير المكون ngOnDestroy() {
    // بعد تدمير المكون، امسح المؤقت لمنع تسرب الذاكرة if(this.displayTimeOut) {
      ClearTimeout(this.displayTimeOut)
    }
  }
}

إن كتابة تعليمات تلميحات الأدوات

هي محور هذه المقالة، وسأضع علامة على التعليمات المحددة في الكود ~

محتوى الملف ذي الصلة tooltip.directive.ts هو كما يلي:

import {. 
  ApplicationRef، // اكتشاف المكالمات العامة ComponentFactoryResolver، // إنشاء كائن مكون ComponentRef، // اقتران وتوجيه مثيل المكون، مع الإشارة إلى العنصر الذي تم إنشاؤه بواسطة ComponentFactory Directive، ElementRef، 
  EmbeddedViewRef, // EmbeddedViewRef يرث من ViewRef ويستخدم لتمثيل عناصر واجهة المستخدم المحددة في عناصر القالب.
  HostListener، // حاقن الاستماع إلى حدث DOM، // إدخال حقن التبعية 
} من '@angular/core';

استيراد { TooltipComponent } من './tooltip/tooltip.component'؛

@التوجيه({
  المحدد: '[appTooltip]'
})
فئة التصدير TooltipDirective {
  @Input("appTooltip") appTooltip!: string;

  المكون الخاص!: ComponentRef<TooltipComponent>;

  // احصل على الموضع النسبي للعنصر المستهدف، مثل اليسار واليمين والأعلى والأسفل
  الحصول على elementPosition() {
    إرجاع this.elementRef.nativeElement.getBoundingClientRect(); 
  }

  منشئ(
    العنصر المحمي: ElementRef،
    مرجع التطبيق المحمي: مرجع التطبيق،
    المكون المحميFactoryResolver: ComponentFactoryResolver،
    حاقن محمي: حاقن
  ) { }

  // إنشاء تلميح الأدوات
  محمية createTooltip() {
    this.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // ربط مكون تلميح الأداة.create(this.injector);

    this.componentRef.instance.data = { // ربط محتوى بيانات البيانات: this.appTooltip,
      العنصر: this.elementRef.nativeElement،
      موقف العنصر: this.elementPosition
    }

    this.appRef.attachView(this.componentRef.hostView); // أضف طريقة عرض const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    document.body.appendChild(domElem);
  }
  
  // حذف تلميح الأداة
  محمية تدميرTooltip () {
    إذا (هذا.componentRef) {
      this.appRef.detachView(this.componentRef.hostView); // إزالة العرض this.componentRef.destroy();
    }
  }
  
  // استمع لحركة الماوس في @HostListener('mouseover')
  أونينتر () {
    this.createTooltip();
  }
    
  // استمع لحركة الماوس out@HostListener('mouseout')
  خارج () {
    this.destroyTooltip();
  }

}

عند هذه النقطة، تم إكمال 99% من الوظائف. والآن يمكننا أن نسميها على الصفحة.

في الصفحة نطلب

منا إضافة المحتوى التالي إلى user-list.component.html :

<p style="margin-top: 100px;">
  <!-- [appTooltip]=""مرحبًا جيمي"" هي النقطة الأساسية-->
  <span 
    [appTooltip]="'مرحبا جيمي'" 
    النمط = "الهامش الأيسر: 200 بكسل؛ العرض: 160 بكسل؛ محاذاة النص: المركز؛ الحشو: 20 بكسل 0؛ العرض: كتلة مضمّنة؛ الحد: 1 بكسل صلب #999؛"
  >جيمي</span>
</p>

لقد أعلنا عن تعليمات TooltipDirective على app.module.ts ، ويمكننا أن نسميها مباشرة. التأثير الحالي هو كما يلي:

يتم عرض tooltip الذي قمنا بتنفيذه في المنتصف السفلي، وهو ما نستخدمه عادةً في إطار العمل، مثل السمة bottom tooltip في angular ant design . بالنسبة للسمات الأخرى، إذا كان القراء مهتمين، فيمكن توسيعها.

في هذه المرحلة، يمكننا الحفاظ على ملفات التعليمات التي كتبناها.