Angular 2의 $compile과 동등
지시문이 포함된 HTML을 수동으로 컴파일하고 싶습니다. 말은 입니까?$compile2번이요?
예를 들어 Angular 1에서는 HTML 조각을 동적으로 컴파일하여 DOM에 추가할 수 있습니다.
var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
각도 2.3.0 (2016-12-07)
모든 세부 정보를 얻으려면:
동작 상황을 확인하려면:
주요 항목:
1) 작성 1) 템플릿
컴포넌트 2) 컴포넌트
Create 3)
컴파일 4) 컴파일
Component 작성(및 캐시) 5) 컴포넌트 팩토리 5 ( 시 )
) Target을 .
컴포넌트를 작성하는 간단한 개요
createNewComponent (tmpl:string) {
@Component({
selector: 'dynamic-component',
template: tmpl,
})
class CustomDynamicComponent implements IHaveDynamicData {
@Input() public entity: any;
};
// a component for this particular template
return CustomDynamicComponent;
}
NgModule에 컴포넌트를 주입하는 방법
createComponentModule (componentType: any) {
@NgModule({
imports: [
PartsModule, // there are 'text-editor', 'string-editor'...
],
declarations: [
componentType
],
})
class RuntimeComponentModule
{
}
// a module for just this Type
return RuntimeComponentModule;
}
: " " " " " 를하는 방법ComponentFactory (캐시) (캐시)
public createComponentFactory(template: string)
: Promise<ComponentFactory<IHaveDynamicData>> {
let factory = this._cacheOfFactories[template];
if (factory) {
console.log("Module and Type are returned from cache")
return new Promise((resolve) => {
resolve(factory);
});
}
// unknown template ... let's create a Type for it
let type = this.createNewComponent(template);
let module = this.createComponentModule(type);
return new Promise((resolve) => {
this.compiler
.compileModuleAndAllComponentsAsync(module)
.then((moduleWithFactories) =>
{
factory = _.find(moduleWithFactories.componentFactories
, { componentType: type });
this._cacheOfFactories[template] = factory;
resolve(factory);
});
});
}
위의 결과를 사용하는 코드 조각입니다.
// here we get Factory (just compiled or from cache)
this.typeBuilder
.createComponentFactory(template)
.then((factory: ComponentFactory<IHaveDynamicData>) =>
{
// Target will instantiate and inject component (we'll keep reference to it)
this.componentRef = this
.dynamicComponentTarget
.createComponent(factory);
// let's inject @Inputs to component instance
let component = this.componentRef.instance;
component.entity = this.entity;
//...
});
여기서 읽은 모든 세부 정보와 함께 전체 설명 또는 작업 예제를 참조하십시오.
.
.
구식 - Angular 2.0 RC5 관련(RC5만 해당)
이전 RC 버전에 대한 이전 솔루션을 보려면 이 게시물의 이력을 검색하십시오.
주의: @BennyBottema가 코멘트에서 언급했듯이 Dynamic ComponentLoader는 폐지되었습니다.따라서 이 답변도 마찬가지입니다.
Angular2에는 $compile 등가가 없습니다.ES6 클래스를 사용하여 코드를 동적으로 컴파일할 수 있습니다(이 플랭크 참조).
import {Component, DynamicComponentLoader, ElementRef, OnInit} from 'angular2/core'
function compileToComponent(template, directives) {
@Component({
selector: 'fake',
template , directives
})
class FakeComponent {};
return FakeComponent;
}
@Component({
selector: 'hello',
template: '<h1>Hello, Angular!</h1>'
})
class Hello {}
@Component({
selector: 'my-app',
template: '<div #container></div>',
})
export class App implements OnInit {
constructor(
private loader: DynamicComponentLoader,
private elementRef: ElementRef,
) {}
ngOnInit() {} {
const someDynamicHtml = `<hello></hello><h2>${Date.now()}</h2>`;
this.loader.loadIntoLocation(
compileToComponent(someDynamicHtml, [Hello])
this.elementRef,
'container'
);
}
}
단, html 파서가 angular2 core 안에 있을 때만 동작합니다.
사용한 Angular 버전 - Angular 4.2.0
Angular 4는 실행 시 컴포넌트를 로드하기 위해 Component Factory Resolver와 함께 제공됩니다.이것은 Angular 1.0에서의 $compile 구현과 같은 것으로, 고객의 요구에 부응합니다.
다음 예제에서는 ImageWidget 컴포넌트를 DashboardTileComponent에 동적으로 로드합니다.
컴포넌트를 로드하려면 동적 컴포넌트를 배치하는 데 도움이 되는 ng-template에 적용할 수 있는 지침이 필요합니다.
Widget Host Directive
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[widget-host]',
})
export class DashboardTileWidgetHostDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
}
이 지시어는 동적으로 추가된 컴포넌트를 호스트하는 요소의 뷰 컨테이너에 액세스하기 위해 ViewContainerRef를 삽입합니다.
DashboardTileComponent(동적 구성요소를 렌더링하는 자리 표시자 구성요소)
이 구성 요소는 상위 구성 요소에서 오는 입력을 받아들이거나 구현에 따라 서비스에서 로드할 수 있습니다.이 구성 요소는 런타임에 구성 요소를 해결하는 주요 역할을 수행합니다.이 메서드에서는 render Component()라는 이름의 메서드도 확인할 수 있습니다.이 메서드는 최종적으로 서비스에서 컴포넌트 이름을 로드하고 Component Factory Resolver를 사용하여 해결하고 마지막으로 데이터를 다이내믹컴포넌트로 설정합니다.
import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DashboardTileWidgetHostDirective } from './DashbardWidgetHost.Directive';
import { TileModel } from './Tile.Model';
import { WidgetComponentService } from "./WidgetComponent.Service";
@Component({
selector: 'dashboard-tile',
templateUrl: 'app/tile/DashboardTile.Template.html'
})
export class DashboardTileComponent implements OnInit {
@Input() tile: any;
@ViewChild(DashboardTileWidgetHostDirective) widgetHost: DashboardTileWidgetHostDirective;
constructor(private _componentFactoryResolver: ComponentFactoryResolver,private widgetComponentService:WidgetComponentService) {
}
ngOnInit() {
}
ngAfterViewInit() {
this.renderComponents();
}
renderComponents() {
let component=this.widgetComponentService.getComponent(this.tile.componentName);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
let viewContainerRef = this.widgetHost.viewContainerRef;
let componentRef = viewContainerRef.createComponent(componentFactory);
(<TileModel>componentRef.instance).data = this.tile;
}
}
DashboardTileComponent.html
<div class="col-md-2 col-lg-2 col-sm-2 col-default-margin col-default">
<ng-template widget-host></ng-template>
</div>
Widget Component Service
이것은 동적으로 해결할 모든 컴포넌트를 등록하는 서비스 팩토리입니다.
import { Injectable } from '@angular/core';
import { ImageTextWidgetComponent } from "../templates/ImageTextWidget.Component";
@Injectable()
export class WidgetComponentService {
getComponent(componentName:string) {
if(componentName==="ImageTextWidgetComponent"){
return ImageTextWidgetComponent
}
}
}
ImageTextWidgetComponent(실행시에 로드하는 컴포넌트)
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'dashboard-imagetextwidget',
templateUrl: 'app/templates/ImageTextWidget.html'
})
export class ImageTextWidgetComponent implements OnInit {
@Input() data: any;
constructor() { }
ngOnInit() { }
}
마지막으로 이 ImageTextWidgetComponent를 entryComponent로 앱 모듈에 추가합니다.
@NgModule({
imports: [BrowserModule],
providers: [WidgetComponentService],
declarations: [
MainApplicationComponent,
DashboardHostComponent,
DashboardGroupComponent,
DashboardTileComponent,
DashboardTileWidgetHostDirective,
ImageTextWidgetComponent
],
exports: [],
entryComponents: [ImageTextWidgetComponent],
bootstrap: [MainApplicationComponent]
})
export class DashboardModule {
constructor() {
}
}
타일 모델
export interface TileModel {
data: any;
}
이 npm 패키지로 더 쉽게 할 수 있었습니다.https://www.npmjs.com/package/ngx-dynamic-template
사용방법:
<ng-template dynamic-template
[template]="'some value:{{param1}}, and some component <lazy-component></lazy-component>'"
[context]="{param1:'value1'}"
[extraModules]="[someDynamicModule]"></ng-template>
컴포넌트의 인스턴스를 디나믹하게 생성하여 DOM에 연결하려면 다음 스크립트를 사용할 수 있으며 Angular RC에서 작업해야 합니다.
html 템플릿:
<div>
<div id="container"></div>
<button (click)="viewMeteo()">Meteo</button>
<button (click)="viewStats()">Stats</button>
</div>
로더 컴포넌트
import { Component, DynamicComponentLoader, ElementRef, Injector } from '@angular/core';
import { WidgetMeteoComponent } from './widget-meteo';
import { WidgetStatComponent } from './widget-stat';
@Component({
moduleId: module.id,
selector: 'widget-loader',
templateUrl: 'widget-loader.html',
})
export class WidgetLoaderComponent {
constructor( elementRef: ElementRef,
public dcl:DynamicComponentLoader,
public injector: Injector) { }
viewMeteo() {
this.dcl.loadAsRoot(WidgetMeteoComponent, '#container', this.injector);
}
viewStats() {
this.dcl.loadAsRoot(WidgetStatComponent, '#container', this.injector);
}
}
Angular TypeScript/ES6(Angular 2+)
AOT+JIT와 동시에 동작합니다.
https://github.com/patrikx3/angular-compile 에서 사용방법을 작성했습니다.
npm install p3x-angular-compile
컴포넌트:컨텍스트와 일부 HTML 데이터가 있어야 합니다.
HTML:
<div [p3x-compile]="data" [p3x-compile-context]="ctx">loading ...</div>
컴포넌트는 단순한 동적 Angular 컴포넌트 https://www.npmjs.com/package/@codehint-ng/syslogs를 컴파일할 수 있습니다.
오래된 문제인 것은 알지만, AOT를 유효하게 하는 방법을 찾기 위해 몇 주를 소비했습니다.오브젝트는 컴파일 할 수 있었지만 기존 컴포넌트는 실행할 수 없었습니다.코드를 컴파일 하는 것이 아니라 커스텀템플릿을 실행하는 것이 목적이었기 때문에, 최종적으로 택트를 바꾸기로 결정했습니다.누구나 할 수 있는 html을 추가해서 기존 공장들을 루핑하는 것이 제 생각입니다.그렇게 함으로써 요소/속성/등 이름을 검색하고 해당 HTMLEment에서 컴포넌트를 실행할 수 있습니다.나는 그것을 작동시킬 수 있었고 내가 그것에 낭비하는 엄청난 시간을 절약하기 위해 이것을 다른 사람에게 공유해야겠다고 생각했다.
@Component({
selector: "compile",
template: "",
inputs: ["html"]
})
export class CompileHtmlComponent implements OnDestroy {
constructor(
private content: ViewContainerRef,
private injector: Injector,
private ngModRef: NgModuleRef<any>
) { }
ngOnDestroy() {
this.DestroyComponents();
}
private _ComponentRefCollection: any[] = null;
private _Html: string;
get Html(): string {
return this._Html;
}
@Input("html") set Html(val: string) {
// recompile when the html value is set
this._Html = (val || "") + "";
this.TemplateHTMLCompile(this._Html);
}
private DestroyComponents() { // we need to remove the components we compiled
if (this._ComponentRefCollection) {
this._ComponentRefCollection.forEach((c) => {
c.destroy();
});
}
this._ComponentRefCollection = new Array();
}
private TemplateHTMLCompile(html) {
this.DestroyComponents();
this.content.element.nativeElement.innerHTML = html;
var ref = this.content.element.nativeElement;
var factories = (this.ngModRef.componentFactoryResolver as any)._factories;
// here we loop though the factories, find the element based on the selector
factories.forEach((comp: ComponentFactory<unknown>) => {
var list = ref.querySelectorAll(comp.selector);
list.forEach((item) => {
var parent = item.parentNode;
var next = item.nextSibling;
var ngContentNodes: any[][] = new Array(); // this is for the viewchild/viewchildren of this object
comp.ngContentSelectors.forEach((sel) => {
var ngContentList: any[] = new Array();
if (sel == "*") // all children;
{
item.childNodes.forEach((c) => {
ngContentList.push(c);
});
}
else {
var selList = item.querySelectorAll(sel);
selList.forEach((l) => {
ngContentList.push(l);
});
}
ngContentNodes.push(ngContentList);
});
// here is where we compile the factory based on the node we have
let component = comp.create(this.injector, ngContentNodes, item, this.ngModRef);
this._ComponentRefCollection.push(component); // save for our destroy call
// we need to move the newly compiled element, as it was appended to this components html
if (next) parent.insertBefore(component.location.nativeElement, next);
else parent.appendChild(component.location.nativeElement);
component.hostView.detectChanges(); // tell the component to detectchanges
});
});
}
}
html 코드를 삽입하려면 디렉티브를 사용합니다.
<div [innerHtml]="htmlVar"></div>
컴포넌트 전체를 로드하려면 Dynamic Component Loader를 사용합니다.
https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html
언급URL : https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2
'programing' 카테고리의 다른 글
| Angular에서 반복된 요소의 합계 계산JS ng 반복 (0) | 2023.02.25 |
|---|---|
| 카트 표시 중 배송 국가 가져오기 - WooCommerce (0) | 2023.02.25 |
| 도커 컨테이너에서 mongodb 쉘을 시작하는 방법은 무엇입니까? (0) | 2023.02.25 |
| 각도와 동일한 각도는 무엇입니까?JS $watch? (0) | 2023.02.25 |
| 클래스 기반 컴포넌트에서 React.forwardRef를 사용하는 방법 (0) | 2023.02.25 |