Инкапсуляция стилей и ссылки
Инкапсуляция стилей
Ангулар использует инкапсуляцию стилей компонентов. Стили элементов должны быть прописаны непосредственно в компонентах. Это дает возможность использовать в различных компонентах различные стили с одинаковым названием.
Инкапсуляцию можно отключить, если в декораторе компонента прописать: 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
.