Перейти к содержанию

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

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

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

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