Pemahaman mendalam tentang dekorator @Component di sudut

1. @Component Decorator

1.1 Tujuan @Component Decorator

Saat mendeklarasikan sebuah komponen, dekorator @Component harus digunakan pada kelas komponen untuk memberi tahu Angular bahwa ini adalah sebuah komponen. [Rekomendasi tutorial terkait: "tutorial sudut"]

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

@Komponen({
  pemilih: 'peringatan-produk-aplikasi',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
kelas ekspor ProductAlertsComponent mengimplementasikan OnInit {

  konstruktor() {} }

  ngOnInit() {
  }

}

1.2 Opsi umum dekorator @Component

@Component dekorator mewarisi dari Directive . Pemilih css ini digunakan untuk menandai direktif dalam templat dan memicu pembuatan instance direktif.

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

1.2.2 @Component自己特有的选项

2. selector

dapat menggunakan salah satu bentuk berikut:

• element-name : pilih
• [attribute] berdasarkan nama elemen: pilih
• .class berdasarkan nama atribut: pilih [atribut=nilai] berdasarkan nama kelas
: pilih
• not(sub_selector) : pilih selector1, selector2 hanya jika elemen tidak cocok dengan sub-selector sub_selector
• selector1, selector2

2.1 dipilih apakah selector1 atau selector2 cocok dengan element-name : select

@Component({
    pemilih: 'elemen aplikasi',
    templat: './element.component.html',
    styleUrls: ['./element.component.css']
})

<app-element></app-element>

2.2 [attribute] : Pilih

@Component({
    pemilih: '[elemen aplikasi]',
    templat: './element.component.html',
    styleUrls: ['./element.component.css']
})

<div app-element></div>

2.3 .class : Pilih

@Component({
    pemilih: '.app-element',
    templat: './element.component.html',
    styleUrls: ['./element.component.css']
})

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

3. host : {[key:string]:string}

menggunakan sekumpulan pasangan nilai kunci untuk memetakan properti kelas ke pengikatan host elemen (Properti, Atribut, dan acara).
Angular secara otomatis memeriksa pengikatan Properti host selama deteksi perubahan. Jika nilai terikat berubah, Angular memperbarui elemen host direktif.

• Jika kuncinya adalah Properti dari elemen host, nilai Properti akan disebarkan ke atribut DOM yang ditentukan.
• Ketika kuncinya adalah Atribut statis di DOM, nilai Atribut akan disebarkan ke Properti yang ditentukan pada elemen host.
• Perhatikan bahwa nilai atribut default ke variabel. Jika Anda menggunakan nilai atribut secara langsung, Anda perlu menambahkan tanda kutip tunggal atau tanda kutip ganda ke string. Variabel dapat langsung ditentukan dalam komponen

untuk pemrosesan peristiwa:

• kuncinya adalah Peristiwa DOM yang ingin dipantau oleh instruksi. Untuk mendengarkan acara global, tambahkan target yang ingin Anda dengarkan di depan nama acara. Targetnya bisa berupa jendela, dokumen, atau isi.
• Nilainya adalah pernyataan yang akan dieksekusi ketika peristiwa itu terjadi. Jika pernyataan ini menghasilkan nilai salah, fungsi preventDefault dari kejadian DOM ini akan dipanggil. Variabel lokal $event dapat direferensikan dalam pernyataan ini untuk mendapatkan data peristiwa.

3.1 attribute dan property

• properti: Elemen DOM adalah konten yang melekat pada objek, seperti childNodes, firstChild, dll.
• Atribut: Atribut tag HTML adalah atribut yang disertakan dengan node DOM.

Persamaan dan perbedaan:

• beberapa atribut dimiliki oleh properti dan atribut. Misalnya,
• atribut id tidak akan diinisialisasi setelah inisialisasi. Ubah lagi nilai default properti adalah nilai awal dan akan diperbarui

双向dom 的property , jadi instruksinya terikat pada properti, tetapi dalam beberapa kasus dom tidak ada. Properti seperti colspan, rowpan, dll. Jika Anda ingin mengikat properti tag html, Anda perlu menggunakan attr :

<table lebar = "100%" batas = "10 piksel padat">
  <tr>
    <th>Bulan</th>
    <th>Penghematan</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Januari</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Februari</td>
  </tr>
</tabel>

biarkan colnum:number = 2;

3.2 Gunakan host untuk mengikat class

@Component({
    pemilih: '.app-element',
    templat: './element.component.html',
    styleUrls: ['./element.component.css'],
    tuan rumah: {
        '[kelas.kelas-default]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // Biarkan elemen host juga menggunakan gaya element.component.css. Jika tidak, kapsul digunakan secara default untuk menghindari polusi CSS.
})
kelas ekspor AppElementComponent {
  @Input() useDefault = benar;
}

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

3.3 Gunakan style pengikatan host

@Component({
    pemilih: '.app-element',
    templat: './element.component.html',
    styleUrls: ['./element.component.css'],
    tuan rumah: {
        '[gaya.latar belakang]': 'inputBackground'
    }
})
kelas ekspor AppElementComponent {
  @Input() inputBackground = 'merah';
}

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

3.4 Gunakan host untuk mengikat peristiwa

@Component({
    pemilih: '.app-element',
    templat: './element.component.html',
    styleUrls: ['./element.component.css'],
    tuan rumah: {
        '(klik)': 'onClick($acara)'
    }
})
kelas ekspor AppElementComponent {
  publik onClick($acara) {
    konsol.log($acara);
  }
}

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

4. encapsulation (enkapsulasi)

Strategi enkapsulasi gaya untuk template dan gaya CSS.

4.1 Komponen Web

merangkum komponen dengan cara yang terstandarisasi dan tidak mengganggu. Setiap komponen dapat mengatur struktur HTML, gaya CSS, dan kode JavaScript-nya sendiri tanpa不会干扰elemen lain pada halaman.

Komponen Web terdiri dari empat teknologi berikut:

• Elemen Kustom: Elemen kustom
• Templat HTML: Templat HTML
• Shadow DOM: Shadow DOMHTML
• Impor: Impor HTML

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<kepala>
    <meta charset="UTF-8">
    <title>DOM Bayangan</title>
    <gaya tipe="teks/css">
        .shadowroot_son {
            warna: #f00;
        }
    </gaya>
</kepala>
<tubuh>
<p>Saya tidak berada di Shadow Host</p>
<div>Halo dunia!</div>
<skrip>
 // host bayangan
 var shadowHost = dokumen.querySelector('.shadowhost');
 // Membuat akar bayangan (akar bayangan)
 var shadowRoot = shadowHost.createShadowRoot();
 // Akar bayangan adalah simpul pertama dari pohon bayangan, dan simpul lain seperti simpul p adalah simpul turunannya.
 shadowRoot.innerHTML = '<p>Saya berada di Shadow Host</p>';
</skrip>
</tubuh>
<html>

4.3 ViewEncapsulation

ViewEncapsulation memungkinkan pengaturan tiga nilai opsional:

• ViewEncapsulation.Emulated: Tanpa Shadow DOM, namun komponen dienkapsulasi melalui mekanisme pengemasan gaya yang disediakan oleh Angular, sehingga gaya komponen tidak terpengaruh oleh pengaruh eksternal. Ini adalah pengaturan default Angular.
• ViewEncapsulation.ShadowDom: Gunakan fitur Shadow DOM asli
• ViewEncapsulation.None: Tanpa Shadow DOM, dan tanpa kemasan gaya

4.3.1 ViewEncapsulation.None

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

@Komponen({
  pemilih: 'aplikasi saya',
  templat: `
    <h4>Selamat datang di Dunia Sudut</h4>
    <p class="greet">Halo {{name}}</p>
  `,
  gaya: [`
    .menyapa {
      latar belakang: #369;
      warna: putih;
    }
  `],
  enkapsulasi: ViewEncapsulation.None // Tidak Ada |
})
kelas ekspor Komponen Aplikasi {
  nama: string = 'Semlinker';
}

Hasil dari pengaturan ViewEncapsulation.None adalah tidak ada Shadow DOM , dan semua gaya diterapkan ke整个document Dengan kata lain, gaya komponen akan受外界影响dan mungkin覆盖.

4.3.2 ViewEncapsulation.Emulated

impor { Komponen, ViewEncapsulation } dari '@angular/core';

@Komponen({
  pemilih: 'aplikasi saya',
  ...,
  enkapsulasi: ViewEncapsulation.Emulated // Tidak Ada |
})
kelas ekspor Komponen Aplikasi {
  nama: string = 'Semlinker';
}

Hasil dari setting ViewEncapsulation.Emulated adalah tidak adanya Shadow DOM , namun komponen dienkapsulasi melalui样式包装机制yang disediakan oleh Angular sehingga gaya komponen不受外部影响. Meskipun gaya tersebut masih diterapkan ke整个document , Angular membuat pemilih [_ngcontent-cmy-0] untuk kelas .greet . Terlihat bahwa为组件定义的样式，被Angular 修改了. Diantaranya, _nghost-cmy- 和_ngcontent-cmy- digunakan untuk实现局部的样式.

4.3.3 ViewEncapsulation.ShadowDom

import { Komponen, ViewEncapsulation } dari '@angular/core';

@Komponen({
  pemilih: 'aplikasi saya',
  ...,
  enkapsulasi: ViewEncapsulation.ShadowDom // Tidak Ada |
})
kelas ekspor Komponen Aplikasi {
  nama: string = 'Semlinker';
}

Hasil dari setting ViewEncapsulation.ShadowDom adalah menggunakan fitur Native Shadow DOM . Angular akan Shadow DOM 形式渲染yang didukung oleh browser.