فهم عميق لمصمم @Component الزاوي

1. @Component Decorator

1.1 الغرض من @Component Decorator

عند الإعلان عن مكون، يجب استخدام @Component Decorator في فئة المكون لإخبار Angular أن هذا مكون. [توصية البرنامج التعليمي ذات الصلة: "البرنامج التعليمي الزاوي"]

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

@عنصر({
  المحدد: "تنبيهات منتج التطبيق"،
  templateUrl: './product-alerts.component.html'،
  styleUrls: ['./product-alerts.component.css']
})
فئة التصدير ProductAlertsComponent تنفذ OnInit {

  منشئ () { }

  نجونينيت () {
  }

}

1.2 الخيارات الشائعة لـ @Component Decorator

@Component Decorator يرث من Directive . يتم استخدام محدد CSS هذا لتمييز التوجيه في القالب وتشغيل إنشاء مثيل للتوجيه.

1.2.1继承自@Directive装饰器的选项

1.2.2 @Component自己特有的选项

2. يمكن لمحدد selector

استخدام أحد النماذج التالية:

• element-name : حدد
• [attribute] بناءً على اسم العنصر: حدد
• .class بناءً على اسم السمة: حدد [سمة=قيمة] بناءً على اسم الفئة
: حدد
• not(sub_selector) : حدد المحدد 1، المحدد 2 فقط عندما لا يتطابق العنصر مع المحدد الفرعي sub_selector
• selector1, selector2

يتم تحديد 2.1 سواء كان المحدد 1 أو المحدد 2 يتطابق مع element-name : حدد

@Component({
    المحدد: "عنصر التطبيق"،
    القالب: "./element.component.html"،
    styleUrls: ['./element.component.css']
})

<app-element></app-element>

2.2 [attribute] : حدد

@Component({
    المحدد: '[عنصر التطبيق]'،
    القالب: "./element.component.html"،
    styleUrls: ['./element.component.css']
})

<div app-element></div>

2.3 .class : حدد

@Component({
    المحدد: '.app-element'،
    القالب: "./element.component.html"،
    styleUrls: ['./element.component.css']
})

<div class="app-element"></div>

3. host : يستخدم {[key:string]:string}

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

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

لمعالجة الحدث:

• مفتاحه هو حدث DOM الذي تريد التعليمات مراقبته. للاستماع إلى حدث عالمي، أضف الهدف الذي تريد الاستماع إليه أمام اسم الحدث. يمكن أن يكون الهدف نافذة أو مستندًا أو نصًا.
• قيمته هي البيان الذي سيتم تنفيذه عند وقوع الحدث. إذا أعاد هذا البيان خطأ، فسيتم استدعاء وظيفة منع الافتراضي لحدث DOM هذا. يمكن الإشارة إلى المتغير المحلي $event في هذا البيان للحصول على بيانات الحدث.

3.1 attribute والخاصية property

• عنصر DOM هو المحتوى المرتبط بالكائن، مثل ChildNodes وfirstChild وما إلى ذلك.
• السمة: سمة علامة HTML هي السمة التي تأتي مع عقدة DOM.

أوجه التشابه والاختلاف:

• تنتمي بعض السمات إلى كل من الخاصية و

双向dom 的property

• هي
• القيمة الأولية وسيتم تحديثها باستخدام dom

dom 的property ، لذا فإن التعليمات مرتبطة بالخاصية، لكن في بعض الحالات لا تكون dom موجودة، مثل colspan، وrowspan، وما إلى ذلك. إذا كنت تريد ربط خصائص علامة html، فستحتاج إلى استخدام attr :

<table. العرض = "100٪" الحدود = "10 بكسل صلب">
  <تر>
    <th>الشهر</th>
    <th>الادخار</th>
  </tr>
  <تر>
    <td [attr.colspan]=colnum>يناير</td>
  </tr>
  <تر>
    <td [attr.colspan]=colnum>فبراير</td>
  </tr>
</الجدول>

Let colnum:number = 2;

3.2 استخدم host لربط class

@Component({
    المحدد: '.app-element'،
    القالب: "./element.component.html"،
    styleUrls: ['./element.component.css']،
    يستضيف: {
        '[class.default-class]': 'useDefault'
    },
    التغليف: ViewEncapsulation.None // دع العنصر المضيف يستخدم أيضًا نمط element.component.css. بخلاف ذلك، يتم استخدام الكبسولات بشكل افتراضي لتجنب تلوث CSS.
})
فئة التصدير AppElementComponent {
  @Input() useDefault = true;
}

<div class="app-element"></div>

3.3 استخدم style ربط host

@Component({
    المحدد: '.app-element'،
    القالب: "./element.component.html"،
    styleUrls: ['./element.component.css']،
    يستضيف: {
        '[style.background]': 'inputBackground'
    }
})
فئة التصدير AppElementComponent {
  @Input() inputBackground = 'red';
}

<div class="app-element"></div>

3.4 استخدم host لربط الأحداث

@Component({
    المحدد: '.app-element'،
    القالب: "./element.component.html"،
    styleUrls: ['./element.component.css']،
    يستضيف: {
        '(انقر)': 'onClick($event)'
    }
})
فئة التصدير AppElementComponent {
  عامة عند النقر(حدث $) {
    console.log($event);
  }
}

<div class="app-element"></div>

4. encapsulation (التغليف)

استراتيجية تغليف النمط للقوالب وأنماط CSS.

4.1 تقوم مكونات الويب

بتغليف أحد المكونات بطريقة موحدة وغير تدخلية. يمكن لكل مكون تنظيم بنية HTML الخاصة به ونمط CSS وتعليمات JavaScript البرمجية دون不会干扰العناصر الأخرى على الصفحة.

تتكون مكونات الويب من التقنيات الأربع التالية:

• العناصر المخصصة: عنصر مخصص
• قوالب HTML: قالب HTML
• Shadow DOM: Shadow DOMHTML
• الواردات: HTML import

4.2 Shadow DOM

<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
    <ميتا محارف = "UTF-8">
    <title>Shadow DOM</title>
    <نمط النوع = "نص/CSS">
        .shadowroot_son {
            اللون: #f00؛
        }
    </نمط>
</الرأس>
<الجسم>
<p>أنا لست في Shadow Host</p>
<div>مرحبًا بالعالم!</div>
<النص البرمجي>
 // مضيف الظل
 var ShadowHost = document.querySelector('.shadowhost');
 // إنشاء جذر الظل (جذر الظل)
 var ShadowRoot = ShadowHost.createShadowRoot();
 // جذر الظل هو العقدة الأولى لشجرة الظل، والعقد الأخرى مثل العقدة p هي العقد الفرعية لها.
 ShadowRoot.innerHTML = '<p>أنا في Shadow Host</p>';
</script>
</الجسم>
<html>

4.3 ViewEncapsulation

يتيح ViewEncapsulation تعيين ثلاث قيم اختيارية:

• ViewEncapsulation.Emulated: لا يوجد Shadow DOM، ولكن يتم تغليف المكون من خلال آلية تعبئة النمط التي توفرها Angular، بحيث لا يتأثر نمط المكون بالتأثيرات الخارجية. هذا هو الإعداد الافتراضي لـ Angular.
• ViewEncapsulation.ShadowDom: استخدم ميزة Shadow DOM الأصلية
• ViewEncapsulation.None: لا يوجد Shadow DOM ولا يوجد نمط تعبئة

4.3.1 ViewEncapsulation.None

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

@عنصر({
  المحدد: "تطبيقي"،
  القالب: `
    <h4>مرحبًا بك في Angular World</h4>
    <p class="greet">مرحبًا {{name}}</p>
  `،
  الأنماط: [`
    تحية {
      الخلفية: #369؛
      اللون: أبيض؛
    }
  `]،
  التغليف: ViewEncapsulation.None // لا شيء |
})
فئة التصدير AppComponent {
  الاسم: سلسلة = 'Semlinker'؛
}

نتيجة إعداد ViewEncapsulation.None هي عدم وجود Shadow DOM ، ويتم تطبيق جميع الأنماط على document整个. بمعنى آخر،受外界影响وقد يتم覆盖.

4.3.2 ViewEncapsulation.Emulated

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

@عنصر({
  المحدد: "تطبيقي"،
  ...،
  التغليف: ViewEncapsulation.Emulated // لا شيء |
})
فئة التصدير AppComponent {
  الاسم: سلسلة = 'Semlinker'؛
}

نتيجة الإعداد ViewEncapsulation.Emulated هي عدم وجود Shadow DOM ، ولكن يتم تغليف المكون من خلال样式包装机制التي توفرها Angular بحيث不受外部影响. على الرغم من أن النمط لا يزال مطبقًا على整个document ، إلا أن Angular يقوم بإنشاء محدد [_ngcontent-cmy-0] للفئة .greet . يمكن ملاحظة أن为组件定义的样式，被Angular 修改了. من بينها، يتم استخدام _nghost-cmy- 和_ngcontent-cmy-实现局部的样式.

4.3.3 ViewEncapsulation.ShadowDom

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

@عنصر({
  المحدد: "تطبيقي"،
  ...،
  التغليف: ViewEncapsulation.ShadowDom // لا شيء |
})
فئة التصدير AppComponent {
  الاسم: سلسلة = 'Semlinker'؛
}

نتيجة إعداد ViewEncapsulation.ShadowDom هي استخدام ميزة Shadow DOM الأصلية. Shadow DOM 形式渲染الذي يدعمه المتصفح.