我想手动编译一些包含指令的HTML。$compile
Angular 2中的等效项是什么?
例如,在Angular 1中,我可以动态地编译HTML片段并将其附加到DOM:
var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
我想手动编译一些包含指令的HTML。$compile
Angular 2中的等效项是什么?
例如,在Angular 1中,我可以动态地编译HTML片段并将其附加到DOM:
var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
Answers:
要获取所有详细信息,请检查:
要查看实际效果:
负责人:
1)创建模板
2)创建组件
3)创建模块
4)编译模块
5)创建(并缓存)ComponentFactory
6)使用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版本的先前解决方案,请在这篇文章的历史中进行搜索
ComponentFactory
并ViewContainerRef
替换现在不推荐使用的DynamicComponentLoader。
$compile($element.contents())($scope.$new());
现在它包含数百行代码,并完成了NgModule的创建……这是使我想摆脱NG2并继续前进到更好的东西的那种方式。
注意:正如@BennyBottema在评论中提到的那样,现已弃用DynamicComponentLoader,因此此答案也已弃用。
Angular2没有任何 $ compile等效项。您可以使用DynamicComoponentLoader
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内核之前,它才起作用。
DynamicComponentLoader
已被弃用,我们如何在Angular 2中做同样的事情?说我有一个模式对话框,我想动态加载新组件作为其内容
我使用过的Angular版本-Angular 4.2.0
ComponentFactoryResolver提出了Angular 4,以便在运行时加载组件。这是Angular 1.0 中$ compile的一种相同实现, 可满足您的需求
在下面的示例中,我将ImageWidget 组件动态加载到DashboardTileComponent中。
为了加载组件,您需要一个可以应用于ng-template的指令, 这将有助于放置动态组件
WidgetHost指令
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[widget-host]',
})
export class DashboardTileWidgetHostDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
}
该指令将ViewContainerRef注入以访问将承载动态添加的组件的元素的视图容器。
DashboardTileComponent(用于显示动态组件的占位符组件)
该组件接受来自父组件的输入,或者您可以根据实现从服务加载。该组件在解决运行时的组件方面起着主要作用。在此方法中,您还可以看到一个名为 renderComponent()最终从服务中加载组件名称,并使用ComponentFactoryResolver进行解析,最后将数据设置为动态组件。
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>
WidgetComponentService
这是一个服务工厂,用于注册要动态解析的所有组件
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;
}
entryComponents
。没有它,您的解决方案将无法工作
这个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);
}
}
同时使用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>
$compile(...)($scope)
。即使在回购自述文件中也没有任何内容。
您可以看到该组件,该组件允许编译简单的动态Angular组件https://www.npmjs.com/package/@codehint-ng/html-compiler
我知道这个问题已经很久了,但是我花了数周的时间试图弄清楚如何在启用AOT的情况下进行此工作。我能够编译一个对象,但无法执行现有组件。好吧,我最终决定更改策略,因为我不希望编译代码太多,而是执行自定义模板。我的想法是添加任何人都可以做并循环通过现有工厂的html。这样,我可以搜索element / attribute / etc。在该HTMLElement上命名并执行组件。我能够使它工作,并认为我应该分享它,以节省我在它上面浪费的大量时间。
@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>
如果要在某个位置加载整个组件,请使用DynamicComponentLoader:
https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html