Глубокое понимание декоратора @Component в angular

1. Декоратор @Component

1.1 Назначение декоратора @Component

При объявлении компонента декоратор @Component должен использоваться в классе компонента, чтобы сообщить Angular, что это компонент. [Рекомендация по соответствующему руководству: «Угловое руководство»]

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

@Компонент({
  селектор: 'app-product-alerts',
  templateUrl: './product-alerts.comComponent.html',
  styleUrls: ['./product-alerts.comComponent.css']
})
класс экспорта ProductAlertsComponent реализует OnInit {

  конструктор() { }

  ngOnInit() {
  }

}

1.2 Общие параметры декоратора @Component

Декоратор @Component наследует от Directive Этот CSS-селектор используется для обозначения директивы в шаблоне и запуска ее создания.

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

1.2.2 @Component自己特有的选项

2. selector

может использовать одну из следующих форм:

• element-name : выберите
• [attribute] на основе имени элемента: выберите
• .class на основе имени атрибута: выберите [атрибут=значение] на основе имени класса
: выберите
• not(sub_selector) : выберите selector1, selector2 только тогда, когда элемент не соответствует подселектору. sub_selector
• selector1, selector2

2.1 выбирается независимо от того, соответствует ли selector1 или selector2 element-name : select

@Component({
    селектор: 'app-element',
    шаблон: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css']
})

<app-element></app-element>

2.2 [attribute] : выберите

@Component({
    селектор: '[app-element]',
    шаблон: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css']
})

<div app-element></div>

2.3 .class : выберите

@Component({
    селектор: '.app-element',
    шаблон: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css']
})

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

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

использует набор пар ключ-значение для сопоставления свойств класса с привязкой хоста элемент (Свойство, Атрибуты и события).
Angular автоматически проверяет привязки свойств хоста во время обнаружения изменений. Если связанное значение изменяется, Angular обновляет хост-элемент директивы.

• Если ключ является свойством главного элемента, значение свойства будет распространено на указанный атрибут DOM.
• Если ключ является статическим атрибутом в DOM, значение атрибута будет распространено на свойство, указанное в главном элементе.
• Обратите внимание, что значением атрибута по умолчанию является переменная. Если вы используете значение атрибута напрямую, вам необходимо добавить к строке одинарные или двойные кавычки. Переменную можно определить непосредственно в компоненте

для обработки событий:

• ее ключом является ключ. Событие DOM, которое инструкция хочет отслеживать. Чтобы прослушать глобальное событие, добавьте цель, которую вы хотите прослушивать, перед именем события. Целью может быть окно, документ или тело.
• Его значением является оператор, который будет выполнен при возникновении события. Если этот оператор вернет false, будет вызвана функция PreventDefault этого события DOM. В этом операторе можно ссылаться на локальную переменную $event для получения данных о событии.

3.1 attribute и property

• : элемент DOM — это содержимое, прикрепленное к объекту, например childNodes, firstChild и т. д.
• Атрибут: атрибут HTML-тега — это атрибут, который поставляется с узлом DOM.

Сходства и различия:

• некоторые атрибуты принадлежат как свойству, так и свойству. Например,
• атрибут id не будет инициализирован после инициализации. Измените его еще раз; значение свойства по умолчанию является начальным значением и будет обновлено с помощью

双向dom 的property , поэтому инструкция привязана к свойству, но в некоторых случаях dom не существует. Такое свойство, как colspan, rowspan и т. д. Если вы хотите связать свойства html-тега, вам нужно использовать attr :

<table. width="100%" border="10px сплошной">
  <тр>
    <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.comComponent.html',
    styleUrls: ['./element.comComponent.css'],
    хозяин: {
        '[class.default-class]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // Пусть основной элемент также использует стиль element.comComponent.css. В противном случае по умолчанию используются капсулы, чтобы избежать загрязнения CSS.
})
класс экспорта AppElementComponent {
  @Input() useDefault = true;
}

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

3.3 Использовать style привязки host

@Component({
    селектор: '.app-element',
    шаблон: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css'],
    хозяин: {
        '[style.background]': 'inputBackground'
    }
})
класс экспорта AppElementComponent {
  @Input() inputBackground = 'красный';
}

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

3.4. Использование host для привязки событий

@Component({
    селектор: '.app-element',
    шаблон: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css'],
    хозяин: {
        '(клик)': 'onClick($event)'
    }
})
класс экспорта AppElementComponent {
  общественный onClick ($ событие) {
    console.log($событие);
  }
}

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

4. encapsulation (инкапсуляция)

Стратегия инкапсуляции стилей для шаблонов и стилей CSS.

4.1 Веб-компоненты

инкапсулируют компонент стандартизированным и ненавязчивым способом. Каждый компонент может организовать свою собственную структуру HTML, стиль CSS и код JavaScript, не不会干扰другим элементам на странице.

Веб-компоненты состоят из следующих четырех технологий:

• Пользовательские элементы: Пользовательский элемент HTML-
• шаблоны: HTML-шаблон
• Теневой DOM: Теневой DOMHTML
• Импорт: HTML-импорт

4.2 Теневой DOM

<!DOCTYPE html>
<html>
<голова>
    <мета-кодировка="UTF-8">
    <title>Теневой DOM</title>
    <style type="text/css">
        .shadowroot_son {
            цвет: #f00;
        }
    </стиль>
</голова>
<тело>
<p>Я не в Shadow Host</p>
<div>Привет, мир!</div>
<скрипт>
 // теневой хост
 varshadowHost = document.querySelector('.shadowhost');
 // Создаем теневой корень (теневой корень)
 варshadowRoot =shadowHost.createShadowRoot();
 // Теневой корень — это первый узел теневого дерева, а другие узлы, такие как узел p, — его дочерние узлы.
 shadowRoot.innerHTML = '<p>Я нахожусь в теневом хосте</p>';
</скрипт>
</тело>
<html>

4.3 ViewEncapsulation

ViewEncapsulation позволяет установить три дополнительных значения:

• ViewEncapsulation.Emulated: нет теневого DOM, но компонент инкапсулируется с помощью механизма упаковки стилей, предоставляемого Angular, поэтому на стиль компонента не влияют внешние влияния. Это настройка Angular по умолчанию.
• ViewEncapsulation.ShadowDom: используйте встроенную функцию Shadow DOM.
• ViewEncapsulation.None: нет Shadow DOM и упаковки стилей.

4.3.1 ViewEncapsulation.None

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

@Компонент({
  селектор: «мое приложение»,
  шаблон: `
    <h4>Добро пожаловать в мир Angular</h4>
    <p class="greet">Привет, {{name}</p>
  `,
  стили: [`
    .приветствовать {
      фон: #369;
      цвет: белый;
    }
  `],
  инкапсуляция: ViewEncapsulation.None // Нет Эмулируемый ShadowDom |
})
класс экспорта AppComponent {
  имя: строка = 'Семлинкер';
}

Результатом установки ViewEncapsulation.None является отсутствие Shadow DOM и все стили применяются ко整个document . Другими словами, на стиль компонента будет受外界影响и он может быть覆盖.

4.3.2 ViewEncapsulation.Emulated

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

@Компонент({
  селектор: «мое приложение»,
  ...,
  инкапсуляция: ViewEncapsulation.Emulated // Нет Эмуляции |
})
класс экспорта AppComponent {
  имя: строка = 'Семлинкер';
}

Результатом настройки 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 // Нет Эмулируемый ShadowDom |
})
класс экспорта AppComponent {
  имя: строка = 'Семлинкер';
}

Результатом настройки ViewEncapsulation.ShadowDom является использование встроенной функции Shadow DOM . Angular будет Shadow DOM 形式渲染поддерживаемым браузером.