{"id":330057,"date":"2022-02-24T09:00:38","date_gmt":"2022-02-24T09:00:38","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=330057"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=330057","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0449\u0435: \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 Angular 13<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0411\u044b\u0432\u0430\u044e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0443\u043b\u0442\u0438\u043f \u0438\u043b\u0438 \u0431\u0430\u043d\u043d\u0435\u0440. \u0412 \u0442\u0430\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 Angular, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c createComponent \u0443 ViewContainerRef<\/a>.<\/p>\n

\u041d\u043e \u0441 13 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 API \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f.\u00a0\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0442\u0435\u043c, \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n

\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c, \u0445\u043e\u0447\u0443 \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u0438\u0442\u044c \u0441 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 Ivy, \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 Angular. \u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u044b \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0449\u0430\u043b\u0438\u0441\u044c \u0441 View Engine, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c Ivy \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0441\u0435\u0431\u044f \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435<\/em>! <\/p>\n

\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c: \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c DynamicComponent, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: <\/p>\n

dynamic.component.ts<\/strong><\/p>\n

import {Component} from '@angular\/core';  @Component({   selector: 'app-dynamic',   template: `     <div><img       src='https:\/\/images.pexels.com\/photos\/7294069\/pexels-photo-7294069.jpeg?auto=compress&cs=tinysrgb&h=750&w=350'       alt='image'>     <\/div>`,   styles: [`     :host {       text-align: center;     }`   ] }) export class DynamicComponent { } <\/code><\/pre>\n
\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432 AppComponent \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u00abshow-btn<\/strong>\u00bb \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u00abremove-btn<\/strong>\u00bb \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438: showDynamicComponent<\/code> \u0438 removeDynamicComponent<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n
app.component.html<\/strong><\/p>\n
<div class=\"buttons-container\">   <button class=\"show-btn\" (click)=\"showDynamicComponent()\">Show component<\/button>   <button class=\"remove-btn\" (click)=\"removeDynamicComponent()\">     Remove component   <\/button> <\/div> <ng-template #dynamic><\/ng-template><\/code><\/pre>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <ng-template #dynamic><\/ng-template><\/code> \u2014 \u044d\u0442\u043e <\/em>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f DynamicComponent<\/code>. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n
\u0414\u0430\u043b\u044c\u0448\u0435 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0430\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c:<\/p>\n
\u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0434\u043e Angular 13<\/h2>\n
1) \u0421 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a showDynamicComponent<\/code>.<\/p>\n
app.component.ts<\/strong><\/p>\n
import {   Component,   ComponentFactoryResolver,   ComponentRef,   OnDestroy,   ViewChild,   ViewContainerRef, } from '@angular\/core'; import { DynamicComponent } from '.\/dynamic.component';  @Component({   selector: 'my-app',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.css'], }) export class AppComponent implements OnDestroy {   @ViewChild('dynamic', { read: ViewContainerRef })   private viewRef: ViewContainerRef;    private componentRef: ComponentRef<DynamicComponent>;    constructor(     private readonly componentFactoryResolver: ComponentFactoryResolver   ) {}    showDynamicComponent(): void {     this.viewRef.clear(); \/\/ destroys all views in container     const componentFactory =       this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);     this.componentRef = this.viewRef.createComponent(componentFactory);   } }<\/code><\/pre>\n
\u0427\u0442\u043e \u0437\u0430 componentFactory<\/em><\/a> \u043d\u0430 28 \u0441\u0442\u0440\u043e\u043a\u0435? \u042d\u0442\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e ComponentFactoryResolver<\/em><\/a>. <\/p>\n
\u0410 ComponentFactoryResolver<\/code> \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 <\/em>DynamicComponent<\/code> \u043d\u0430\u0439\u0434\u0435\u0442 \u0438 \u0432\u0435\u0440\u043d\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0443, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0443\u044e \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <\/em>DynamicComponent<\/code>.<\/em><\/p>\n
\u041d\u0430 30 \u0441\u0442\u0440\u043e\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0430\u0448 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 this.componentRef<\/code>. <\/em>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0444\u0430\u0431\u0440\u0438\u043a\u0438 DynamicComponent<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434 createComponent<\/code> \u0443 this.viewRef<\/em><\/a> (\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430).<\/em><\/p>\n
\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n
abstract createComponent<C>( componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModuleRef?: NgModuleRef<any> ): ComponentRef<C><\/code><\/pre>\n
\u041f\u043e\u043c\u0438\u043c\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0439 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n
2) \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0435\u0433\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044e: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a removeDynamicComponent<\/code> <\/em>\u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00abremove-btn<\/em>\u00bb.<\/p>\n
app.component.ts:<\/strong><\/p>\n
import {   Component,   ComponentFactoryResolver,   ComponentRef,   ViewChild,   ViewContainerRef, } from '@angular\/core'; import { DynamicComponent } from '.\/dynamic.component';  @Component({   selector: 'my-app',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.css'], }) export class AppComponent {   @ViewChild('dynamic', { read: ViewContainerRef })   private viewRef: ViewContainerRef;    private componentRef: ComponentRef<DynamicComponent>;    constructor(     private readonly componentFactoryResolver: ComponentFactoryResolver   ) {}    showDynamicComponent(): void {     this.viewRef.clear(); \/\/ destroys all views in container     const componentFactory =       this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);     this.componentRef = this.viewRef.createComponent(componentFactory);   }    removeDynamicComponent(): void {     this.viewRef.clear(); \/\/ destroys all views in container   } } <\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043d\u0430\u0448 view-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043e\u0442 \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439<\/a>, \u0438 DynamicComponent<\/code> \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f.<\/p>\n
\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 app.component.ts<\/strong><\/p>\n
import {   Component,   ComponentFactoryResolver,   ComponentRef,   ViewChild,   ViewContainerRef, } from '@angular\/core'; import { DynamicComponent } from '.\/dynamic.component';  @Component({   selector: 'my-app',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.css'], }) export class AppComponent {   @ViewChild('dynamic', { read: ViewContainerRef })   private viewRef: ViewContainerRef;    private componentRef: ComponentRef<DynamicComponent>;    constructor(     private readonly componentFactoryResolver: ComponentFactoryResolver   ) {}    showDynamicComponent(): void {     this.viewRef.clear();     const componentFactory =       this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);     this.componentRef = this.viewRef.createComponent(componentFactory);   }    removeDynamicComponent(): void {     this.viewRef.clear();   } }<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u0434:<\/p>\n
\"
    <\/figcaption><\/figure>\n
\u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \ud83d\ude42<\/p>\n
\u0427\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0432 13 \u0432\u0435\u0440\u0441\u0438\u0438 Angular<\/h2>\n
\u0412 \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u043e\u0441\u044c API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0435\u0433\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0435), \u0430 \u0432 13.2 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u044b ComponentFactory<\/code> \u0438 ComponentFactoryResolver<\/code> \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438.<\/p>\n
\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0443 \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n
abstract createComponent<C>(   componentType: Type<C>,   options?: {     index?: number;     injector?: Injector;      ngModuleRef?: NgModuleRef<unknown>;     projectableNodes?: Node[][]; } ): ComponentRef<C><\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0438\u043f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 DynamicComponent<\/code> <\/em>\u0432 \u043c\u0435\u0442\u043e\u0434 createComponent<\/code>, \u0430 \u0441 \u0444\u0430\u0431\u0440\u0438\u043a\u043e\u0439 Angular \u0441\u0430\u043c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0441\u044f.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a showDynamicComponent<\/code>:<\/p>\n
app.component.ts\u00a0\u00a0<\/strong><\/p>\n
import { Component, ViewChild, ViewContainerRef } from '@angular\/core'; import { DynamicComponent } from '.\/dynamic.component';  @Component({   selector: 'my-app',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.css'], }) export class AppComponent {   @ViewChild('dynamic', { read: ViewContainerRef })   private viewRef: ViewContainerRef;   private componentRef: ComponentRef<DynamicComponent>;    showDynamicComponent(): void {     this.viewRef.clear();     this.componentRef = this.viewRef.createComponent(DynamicComponent); \/\/ \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043a   }    removeDynamicComponent(): void {     this.viewRef.clear();   } }<\/code><\/pre>\n
\u0421\u0442\u043e\u0438\u0442 \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044c \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 createComponent<\/code> \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c, \u043c\u044b \u0432\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c index, injector<\/a>, ngModuleRef<\/a> \u0438 projectableNodes, \u043d\u043e \u0443\u0436\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c.<\/p>\n
\u0410 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e createComponent<\/code> \u0432\u0441\u0435 \u0442\u0430\u043a \u0436\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 ComponentRe<\/code>f<\/em>, \u043d\u0430\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n
\u0412\u044b\u0432\u043e\u0434<\/h2>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 13 \u0432\u0435\u0440\u0441\u0438\u0438 Angular \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0449\u0435:<\/p>\n