maxidebox@list.ru | +7 (929) 701 21 71
Инкапсуляция стилей и ссылки

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

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

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

Инкапсуляцию можно отключить, если в декораторе компонента прописать: 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.

Голосов: 5 | Просмотров: 15

Заявка на создание сайта / Продвижение сайта

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

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

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

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

Закажите сайт по телефону: +7 (929) 701 21 71