ความเข้าใจอย่างลึกซึ้งเกี่ยวกับ @Component มัณฑนากรในเชิงมุม

1. @Component Decorator

1.1 วัตถุประสงค์ของ @Component Decorator

เมื่อประกาศส่วนประกอบ ต้องใช้ @Component มัณฑนากรในคลาสส่วนประกอบเพื่อบอก Angular ว่านี่คือส่วนประกอบ [คำแนะนำบทช่วยสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

นำเข้า { ส่วนประกอบ, OnInit } จาก '@ เชิงมุม/core';

@ส่วนประกอบ({
  ตัวเลือก: 'การแจ้งเตือนผลิตภัณฑ์แอป',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
-
คลาสส่งออก ProductAlertsComponent ใช้ OnInit {

  ตัวสร้าง () { }

  ngOnInit() {
  -

}

1.2 ตัวเลือกทั่วไปของ @Component มัณฑนากร

@Component มัณฑนากรสืบทอดมาจาก Directive ตัวเลือก css นี้ใช้เพื่อทำเครื่องหมายคำสั่งในเทมเพลตและทริกเกอร์การสร้างอินสแตนซ์ของคำสั่ง

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

1.2.2 @Component自己特有的选项

2. ตัวเลือก selector

สามารถใช้หนึ่งในแบบฟอร์มต่อไปนี้:

• element-name : เลือก
• [attribute] ตามชื่อองค์ประกอบ: เลือก
• .class ตามชื่อแอตทริบิวต์: เลือก [attribute=value] ตามชื่อคลาส
: เลือก
• not(sub_selector) : เลือก selector1, selector2 เฉพาะเมื่อองค์ประกอบไม่ตรงกับตัวเลือกย่อย sub_selector
• selector1, selector2

2.1 ถูกเลือกว่า selector1 หรือ selector2 ตรงกับ element-name : select

@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 จะอัพเดตองค์ประกอบโฮสต์ของคำสั่ง

• เมื่อคีย์เป็นคุณสมบัติขององค์ประกอบโฮสต์ ค่าคุณสมบัติจะถูกเผยแพร่ไปยังแอตทริบิวต์ DOM ที่ระบุ
• เมื่อคีย์เป็นแอตทริบิวต์คงที่ใน DOM ค่าแอตทริบิวต์จะถูกเผยแพร่ไปยังคุณสมบัติที่ระบุในองค์ประกอบโฮสต์

คุณ

• คำ

• พูดคู่ลงในสตริง

• เหตุการณ์ DOM ที่คำสั่งต้องการตรวจสอบ หากต้องการฟังกิจกรรมระดับโลก ให้เพิ่มเป้าหมายที่คุณต้องการฟังหน้าชื่อกิจกรรม เป้าหมายอาจเป็นหน้าต่าง เอกสาร หรือเนื้อหา
• ค่าของมันคือคำสั่งที่จะดำเนินการเมื่อเหตุการณ์เกิดขึ้น หากคำสั่งนี้ส่งคืนเท็จฟังก์ชัน PreventDefault ของเหตุการณ์ DOM นี้จะถูกเรียก เหตุการณ์ตัวแปรท้องถิ่นสามารถอ้างอิงได้ในคำสั่งนี้เพื่อรับข้อมูลเหตุการณ์

3.1 attribute และ property

• : องค์ประกอบ DOM คือเนื้อหาที่แนบมากับวัตถุ เช่น childNodes, firstChild ฯลฯ
• คุณลักษณะ: คุณลักษณะแท็ก HTML เป็นคุณลักษณะที่มาพร้อมกับโหนด DOM

ความเหมือนและความแตกต่าง:

• คุณลักษณะบางอย่างเป็นของทั้งคุณสมบัติและ คุณลักษณะ ตัวอย่างเช่น
• คุณลักษณะ id จะไม่ถูกเตรียมใช้งานหลังจากการกำหนดค่าเริ่มต้น เปลี่ยนอีกครั้ง ค่าเริ่มต้นของคุณสมบัติคือค่าเริ่มต้น และจะได้รับการอัปเดต

双向dom 的property ดังนั้นคำสั่งจึงผูกไว้กับคุณสมบัติ แต่ในบางกรณี dom ก็ไม่มีอยู่ เช่น colspan, rowspan เป็นต้น หากคุณต้องการผูกคุณสมบัติแท็ก html คุณต้องใช้ attr :

<table width="100%" border="10px ทึบ">
  <tr>
    <th>เดือน</th>
    <th>การออม</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>มกราคม</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>กุมภาพันธ์</td>
  </tr>
</ตาราง>

ให้ colnum:number = 2;

3.2 ใช้ host เพื่อผูก class

@Component({
    ตัวเลือก: '.app-element',
    แม่แบบ: './element.component.html',
    styleUrls: ['./element.component.css'],
    เจ้าภาพ: {
        '[class.default-class]': 'useDefault'
    -
    encapsulation: ViewEncapsulation.None // ให้องค์ประกอบโฮสต์ใช้สไตล์ element.component.css ด้วย มิฉะนั้น ระบบจะใช้แคปซูลเป็นค่าเริ่มต้นเพื่อหลีกเลี่ยงมลภาวะของ CSS
-
ส่งออกคลาส AppElementComponent {
  @อินพุต() useDefault = จริง;
}

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

3.3 ใช้ style การเชื่อมโยง host

@Component({
    ตัวเลือก: '.app-element',
    แม่แบบ: './element.component.html',
    styleUrls: ['./element.component.css'],
    เจ้าภาพ: {
        '[style.พื้นหลัง]': 'inputBackground'
    -
-
ส่งออกคลาส AppElementComponent {
  @Input() inputBackground = 'สีแดง';
}

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

3.4 ใช้ host เพื่อผูกเหตุการณ์

@Component({
    ตัวเลือก: '.app-element',
    แม่แบบ: './element.component.html',
    styleUrls: ['./element.component.css'],
    เจ้าภาพ: {
        '(คลิก)': 'onClick($กิจกรรม)'
    -
-
ส่งออกคลาส AppElementComponent {
  สาธารณะ onClick ($ กิจกรรม) {
    console.log($เหตุการณ์);
  -
}

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

4. encapsulation (การห่อหุ้ม)

กลยุทธ์การห่อหุ้มสไตล์สำหรับเทมเพลตและสไตล์ CSS

4.1 Web Components

ห่อหุ้มส่วนประกอบในลักษณะที่เป็นมาตรฐานและไม่ก้าวก่าย แต่ละส่วนประกอบสามารถจัดระเบียบโครงสร้าง HTML, สไตล์ CSS และโค้ด JavaScript ของตัวเองได้โดยไม่不会干扰องค์ประกอบอื่น ๆ บนเพจ

Web Components ประกอบด้วยสี่เทคโนโลยีต่อไปนี้:

• องค์ประกอบที่กำหนดเอง: องค์ประกอบที่กำหนดเอง
• เทมเพลต HTML: เทมเพลต HTML
• Shadow DOM: Shadow DOMHTML
• การนำเข้า: การนำเข้า HTML

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<หัว>
    <meta charset="UTF-8">
    <title>เงา DOM</title>
    <style type="text/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>';
</สคริปต์>
</ร่างกาย>
<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 } จาก '@angular/core';

@ส่วนประกอบ({
  ตัวเลือก: 'แอปของฉัน'
  แม่แบบ: `
    <h4>ยินดีต้อนรับสู่โลกเชิงมุม</h4>
    <p class="greet">สวัสดี {{name}}</p>
  -
  สไตล์: [`
    .ทักทาย {
      ความเป็นมา: #369;
      สี: ขาว;
    -
  -
  การห่อหุ้ม: ViewEncapsulation.None // ไม่มี | . ShadowDom
-
ส่งออกคลาส AppComponent {
  ชื่อ: string = 'Semlinker';
}

ผลลัพธ์ของการตั้งค่า ViewEncapsulation.None คือไม่มี Shadow DOM และสไตล์ทั้งหมดจะถูกนำไปใช้กับ document整个กล่าวอีกนัยหนึ่ง สไตล์ของส่วนประกอบจะ受外界影响และอาจถูก覆盖

4.3.2 ViewEncapsulation.Emulated

นำเข้า { ส่วนประกอบ ViewEncapsulation } จาก '@ เชิงมุม/core';

@ส่วนประกอบ({
  ตัวเลือก: 'แอปของฉัน'
  -
  การห่อหุ้ม: ViewEncapsulation.Emulated // ไม่มี | . ShadowDom
-
ส่งออกคลาส AppComponent {
  ชื่อ: string = 'semlinker';
}

ผลลัพธ์ของการตั้งค่า ViewEncapsulation.Emulated คือไม่มี Shadow DOM แต่ส่วนประกอบถูกห่อหุ้มผ่าน样式包装机制ที่ Angular มอบให้ เพื่อให้รูปแบบของส่วนประกอบ不受外部影响แม้ว่าสไตล์จะยังคงใช้กับ整个document แต่ Angular ก็สร้างตัวเลือก [_ngcontent-cmy-0] สำหรับคลาส. .greet จะเห็นได้ว่า为组件定义的样式，被Angular 修改了ในจำนวนนี้ _nghost-cmy- 和_ngcontent-cmy- ถูกนำมาใช้เพื่อ实现局部的样式

4.3.3 ViewEncapsulation.ShadowDom

นำเข้า { ส่วนประกอบ ViewEncapsulation } จาก '@ เชิงมุม/core';

@ส่วนประกอบ({
  ตัวเลือก: 'แอปของฉัน'
  -
  encapsulation: Viewencapsulation.Shadowdom // None |
-
ส่งออกคลาส AppComponent {
  ชื่อ: string = 'Semlinker';
}

ผลลัพธ์ของการตั้งค่า ViewEncapsulation.ShadowDom คือการใช้คุณลักษณะ Shadow DOM ดั้งเดิม Angular จะ Shadow DOM 形式渲染ที่รองรับโดยเบราว์เซอร์