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

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

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

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