Что такое представления в Angular

Что такое представление?

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

Свойства элементов в представлении могут изменяться динамически в ответ на действия пользователя; структура (количество и порядок) элементов в представлении не может. Структура элементов может быть изменена путем вставки, перемещения или удаления вложенных представлений в их контейнерах представлений. - согласно Angular Docs. ​​

Представления - это в основном структура данных, которая состоит из узлов представления, которые содержат ссылки на соответствующие элементы DOM. С каждым компонентом связано представление компонента.

Цикл обнаружения изменений выполняется для представлений, и когда angular обнаруживает изменение в состоянии представления компонента, соответствующие узловые элементы в DOM визуализируются снова.

Ниже представлена ​​структура представления:

Элементы в шаблоне компонента добавляются в виде массива узлов. Вышеупомянутый вид имеет 5 узлов в своем шаблоне. Свойство component содержит состояние связанного компонента.

Классы, относящиеся к представлениям:

ChangeDetectorRef - базовый класс для угловых представлений, обеспечивает функцию обнаружения изменений. Этот класс предоставляет различные методы, связанные с обнаружением изменений.

ViewRef - представляет представление Angular, в частности представление хоста, определенное компонентом. Этот класс расширяет ChangeDetectorRef. Помимо методов, унаследованных от родительского класса, он предоставляет метод, связанный с представлением компонента / компонента.

EmbeddedViewRef - представляет угловое представление в контейнере представления. На встроенное представление можно ссылаться из компонента, отличного от компонента хоста, шаблон которого определяет его, или он может быть определен независимо с помощью TemplateRef.

ViewContainerRef - представляет контейнер, в котором одно или несколько представлений могут быть прикреплены к компоненту. Он может содержать основные представления (созданные путем создания экземпляра компонента с помощью метода createComponent()) и встроенные представления (созданные путем создания экземпляра TemplateRef с помощью метода createEmbeddedView()).

Экземпляр контейнера представления может содержать другие контейнеры представления, создавая иерархию представления.

Типы просмотров

Существует два типа представлений: Встроенное и Хост.

Встроенные представления связаны с шаблонами, тогда как основные представления связаны с компонентами.

Создание встроенного представления

В приведенном ниже примере мы создаем встроенное представление из шаблона, вставленного в шаблон компонента.

Теги <ng-container></ng-container> используются в качестве контейнера представления (при чтении его как ViewContainer с помощью запроса @ViewChild) для встроенного представления. Он действует как элемент привязки, под которым представление будет вставлено в шаблон компонента.

Методу контейнера createEmbeddedView () передается ссылка на шаблон для создания представления.

import { Component, AfterViewInit, ViewChild,
ViewContainerRef, TemplateRef } from '@angular/core';
@Component({
  selector: 'app-embedded-view',
  template: `
  <h1>Application Content</h1>
  <ng-container #vc></ng-container> 
  <h3>End of Application</h3>
  <ng-template #tpl>
    <h1>Template Header</h1>
  </ng-template>
  `
})
export class EmbeddedViewComponent implements AfterViewInit {
  @ViewChild("tpl", { read: TemplateRef }) tpl: TemplateRef<any>;
  @ViewChild("vc", { read: ViewContainerRef }) container: ViewContainerRef;
  constructor() { }
  ngAfterViewInit() {
    this.container.createEmbeddedView(this.tpl);
  }
}

Создание представления хоста

Представления хоста связаны с компонентом. Они создаются, когда компонент создается динамически. Ниже DynamicComponent динамически создается с использованием своей фабрики.

Фабрика разрешается с помощью экземпляра ComponentFactoryResolver, введенного в конструктор компонента.

Наконец, представление компонента добавляется в контейнер представления с помощью метода контейнера createComponent () и передачи фабрики DynamicComponent.

@Component({
  template: `<h1>I am dynamically used component element.</h1>`
})
export class DynamicComponent { }
import { AfterViewInit, Component, ViewChild,
ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent} from './dynamic.component';
@Component({
  selector: 'app-host-view',
  template: `
  <h1>Host View example</h1>
  <ng-container #container></ng-container>
  `,
  entryComponents: [ DynamicComponent]
})
export class HostViewComponent implements AfterViewInit {
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) { }
  ngAfterViewInit() {
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    this.ctr.createComponent(factory);
  }
}

Следует убедиться, что компонент, который должен быть создан динамически, должен быть добавлен в массив entryComponents, чтобы фабрика для компонента была создана во время компиляции.

Спасибо за уделенное время… :)