От автора: динамические компоненты в любом фреймворке/библиотеке упрощают в Angular создание приложения больших масштабов. Давайте посмотрим, как мы можем создавать динамические компоненты в Angular 6.
Начало работы с Angular
Во-первых, создайте новый Angular проект. Если в вашей системе не установлен Angular, или если вы все еще используете старую версию Angular, выполните следующую команду на своем терминале:
|
1 |
$ npm install -g @ angular / cli |
Ради этого поста я создал простое приложение с Angular выражением. Клонируйте его в свою систему.
|
1 2 3 4 |
$ git clone //github.com/rajatgeekyants/hero.git $ cd hero $ yarn install $ ng serve --open |
Это запустит приложение, а флаг —open автоматически откроет браузер по //localhost:4200/.
Создание шаблона в шаблоне
Angular поставляется с компонентом ng-template который позволяет нам объявлять любую часть шаблона Angular. Это отличный способ придавать нашему шаблону динамичность, предоставляя нам возможность использовать наш код и передавать его другим компонентам.
В файле app.component.ts напишите новый компонент ng-template в конце template.
|
1 2 3 |
<ng-template #hello> Hello, World </ng-template> |
Если вы сейчас откроете приложение, вы увидите, что новый текст приложения не отображается. Это потому, что вещи, которые находятся внутри компонента ng-template можно только захватить и использовать где-то еще позже.
Чтобы иметь возможность захватить этот шаблон, я дал ему переменную hello. Теперь перейдите в код Component этого файла и добавьте переменную hello внутри ViewChild. Импортируйте ViewChild из @angular/core.
|
1 2 3 4 |
export class AppComponent implements OnInit, AfterViewInit { @ViewChild('hello') helloTemplate; heroes; } |
Теперь нам нужно иметь доступ к коду, который захвачен ViewChild. Для этого мы будем использовать хук жизненного цикла AfterViewInit. Убедитесь, что вы импортируете AfterViewInit из @angular/core. Напишите следующий код внутри Component:
|
1 2 3 |
ngAfterViewInit() { console.log(this.helloTemplate); } |
Откройте инструменты разработчика. Вы заметите, что там есть TemplateRef, в котором есть несколько свойств. Мы рассмотрим их позже.
Передача ссылки шаблона компоненту
Если вы посмотрите файл tab.component.ts, вы увидите, что он использует компонент ng-content для рендеринга контента, предоставленного разработчиком. Давайте посмотрим, как мы можем сделать одну из вкладок для отображения переменной hello, которую мы определили ранее, используя ng-template и визуализировать ее с помощью ng-container и ngTemplateOutlet.
Сначала удалите текст, который передается на вкладке Hero. Мы хотим, чтобы эта вкладка отображала text внутри переменной hello.
|
1 |
<ngx-tab tabTitle="Hero" [template]="hello"></ngx-tab> |
Затем перейдите в файл tab.component.ts и объявите template как входной TabComponent внутри TabComponent:
|
1 2 3 4 5 |
export class TabComponent { @Input() tabTitle: string; @Input() active = false; @Input() template; // new line } |
Внутри @Component у нас есть компонент ng-content, который ничего не делает. Добавьте к компоненту ng-content условие, согласно которому ng-content должен отображать пустое пространство, если нет template.
|
1 |
<ng-content * ngIf = "! template"> </ ng-content> |
Ниже этой строки создайте компонент ng-container, который будет отображать template.
|
1 |
<ng-container * ngIf = "template" [ngTemplateOutlet] = "template"> </ ng-container> |
Обновите свой браузер, и вы увидите, что вторая вкладка отображает переменную hello.
Передача данных в динамический ng-template
Теперь наши вкладки работают достаточно хорошо, но мы действительно хотим сделать некоторые данные извне и сделать их динамически. Для этого мы можем использовать ngTemplateOutletContext для передачи данных в ng-template.
Сначала перейдите в файл tab.component.ts и добавьте новый Input() внутри задачи TabComponent. Этот Input() будет проходить через данные извне.
|
1 2 3 4 5 6 |
export class TabComponent { @Input() tabTitle: string; @Input() active = false; @Input() template; @Input() dataContext; } |
Теперь нам нужно передать эти данные в наш шаблон. Это делается с использованием свойства ngtemplateOutletContext в компоненте ng-container.
|
1 2 3 4 5 |
<ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{data: dataContext}" ></ng-container> |
Причина, по которой я использую объект для передачи dataContext свойству, заключается в том, что я получаю выбор расширения этого свойства, чтобы он мог использовать другие типы данных.
Теперь перейдите в файл app.component.ts и используйте dataContext во втором компоненте ngx-tab.
|
1 2 3 4 5 |
<ngx-tab tabTitle="Hero" [template]="hello" [dataContext="heroes[0]"] ></ngx-tab> |
У нас есть только одна запись внутри массива heroes. Эти данные передаются, а затем внутри компонента ngx-tab мы передадим его нашему шаблону, который в этом случае находится здесь.
Теперь мы можем использовать этот объект данных и использовать его внутри нашего компонента. Я хочу визуализировать имя этого человека, поэтому я бы сделал что-то вроде hero?.name. ? размещается здесь, если hero не определен. Нам также необходимо определить hero как data.
|
1 2 3 |
<ng-template #hello let-hero="data"> Hello, {{hero?.name}} </ng-template> |
Как только ваш браузер обновится, перейдите на вторую вкладку, и вы увидите, что имя правильно отображается.
Якорная точка
При динамическом создании компонента мы должны знать, где разместить компонент в шаблоне другого компонента.
Чтобы сделать это, мы можем использовать пользовательскую директиву, которая выставляет ViewContainerRef и служит нам в качестве точки привязки, которую мы можем ссылаться в дальнейшем.
Сначала перейдите на tabs.component.ts и создайте новый компонент ng-template внутри ng-template @Component.
|
1 |
<ng-template appDynamicTabAnchor> </ ng-template> |
Это область, в которой мы собираемся ввести динамические компоненты позже. Во-первых, нам нужно иметь возможность ссылаться на компонент ng-template. Нам также нужен доступ к ViewContainerRef, который позволит нам динамически создавать компоненты.
Используйте Angular CLI и создайте новую директиву, которая будет служить нам в качестве точки привязки:
|
1 |
$ ng gd tabs / dynamicTabAnchor --flat --spec false |
Это создаст новый файл внутри папки tabs именем dynamic-tab-anchor.directive.ts. Напишите в нем следующий код:
|
1 2 3 4 5 6 7 |
import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appDynamicTabAnchor]' }) export class DynamicTabAnchorDirective { constructor(public viewContainer: ViewContainerRef) { } } |
Нам также нужно импортировать этот файл в файл tabs.component.ts.
|
1 |
import {DynamicTabAnchorDirective} from './dynamic-tab-anchor.directive.ts'; |
Теперь мы можем использовать @ViewChild внутри класса TabsComponent и захватить все экземпляры директив динамической привязки вкладок внутри dynamicTabPlaceholder.
|
1 2 |
@ViewChild(DynamicTabAnchorDirective) dynamicTabPlaceholder; DynamicTabAnchorDirective |
Теперь мы можем создать метод openTab. Затем этот метод будет вызван извне. Я залогирую ViewContainerRef.
|
1 2 3 |
openTab() { console.log(this.dynamicTabPlaceholder.viewContainer) } |
Перейдите в файл app.components.ts и подключите метод openTab к компоненту app-heroes-list:
|
1 |
<app-heroes-list [heroes] = "heroes" (addPerson) = "onAddPerson ()"> </ app-heroes-list> |
Мы должны реализовать это в классе AppComponent. Здесь мы будем называть функцию openTab, которую мы создали внутри tabComponent.
|
1 2 3 |
onAddPerson() { this.tabsComponent.openTab(); } |
Теперь, если вы нажмете кнопку «Add new button», вы увидите, что ViewContainerRef распечатан в DevTools.
Заключение
Динамические компоненты являются многоразовыми и упрощают создание крупномасштабных приложений. Этот пост является всего лишь шагом вперед для обеспечения динамичности для компонентов Angular.
Я надеюсь, что этот пост помог вам лучше разобраться в динамичности в Angular. Следите за новыми постами в Angluar, Vue, React и других популярных фреймворках/библиотеках.
Автор: Rajat S
Источник: //blog.bitsrc.io/
Редакция: Команда webformyself.
