меню

Инкапсуляция стилей

Ангулар использует инкапсуляцию стилей компонентов. Стили элементов должны быть прописаны непосредственно в компонентах. Это дает возможность использовать в различных компонентах различные стили с одинаковым названием.

Инкапсуляцию можно отключить, если в декораторе компонента прописать: encapsulation: ViewEncapsulation.None

Варианты инкапсуляции:

  • ViewEncapsulation.Emulated кроссбраузерная инкапсуляция;
  • ViewEncapsulation.Native инкапсуляция через shadow DOM;

Локальная ссылка в шаблоне

Любой html элемент может иметь на себя ссылку в шаблоне:

  
<input 
  type="text" 
  class="form-control" 
  #serverNameInput>
 

Теперь, переменаая serverNameInput, будет содержать html код данного элемента.
Использовать эту переменную можно только в шаблоне, например:

  
<button
  class="btn btn-primary"
  (click)="onAddServer(serverNameInput)">Add Server</button>
  

В компоненте нужно явно указать тип в методе:

  
onAddServer(inputEl: HTMLInputElement) {
  this.serverCreated.emit({serverName: inputEl.value, serverContent: this.newServerContent});
 

Доступ к шаблону и DOM из компонента с @ViewChild

ВАЖНО!!! Данный метод не рекомендуется использовать, предпочтительнее пользоваться директивами а не прямым доступом к DOM.

В шаблоне:

 
<input 
      type="text" 
      class="form-control" 
      #serverNameInput>
 

В компоненте:

  
import { Component, OnInit, EventEmitter, Output, ViewChild, ElementRef} from '@angular/core';

export class CockpitComponent implements OnInit { 
  @ViewChild('serverNameInput') serverNameInput: ElementRef;
  

Теперь значение инпута доступно через this.serverNameInput.nativeElement.value

@ContentChild

Если элемент, к которому нужно получить доступ из компонента находится в теге внешнего шаблона, например:

  
<app-server-element 
  *ngFor="let serverElement of serverElements"
  [srvElement]=serverElement>
    <p #contentParagraph>
      <strong *ngIf="serverElement.type === 'server'" style="color: red">{{ serverElement.content }}</strong>
      <em *ngIf="serverElement.type === 'blueprint'">{{ serverElement.content }}</em>
    </p>
</app-server-element>
 

То вместо @ViewChild используется @ContentChild. Не забудьте импортировать класс ContentChild. Тип переменной ElementRef.


Возможно, вам будет интересно

Route Resolving

Разрешение динамических данных перед активацией роута и интерфейс Resolve в Angular

Route. Защита роутера

Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера

Связывание свойств и событий

Создание кастомных событий и их обработчиков. Импорт свойств родительского компонента.

Observable. Subscribe и Unsubscribe

Stream и работа с Observable в Angular. Пример отписки в ngOnDestroy()

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту