等效$编译(角2)

Question

等效$编译(角2)

我想手动编译一些包含指令的HTML。什么是相当于$compile角度2？

例如，在角1中，我可以动态编译HTML片段并将其附加到DOM中：

var e = angular.element('<div directive></div>');element.append(e);$compile(e)($scope);

Answer 1

角形&nbsp;2.3.0&nbsp;(2016-12-07)要获得所有详细信息，请检查：如何使用/创建动态模板来编译具有角2.0的动态组件？在行动中看到这一点：观察工作柱塞(与2.3.0+一起工作)校长：1)创建模板2)创建组件3)创建模块4)编译模块5)创建(和缓存)ComponentFactory6)使用Target创建一个实例快速概述如何创建组件createNewComponent&nbsp;(tmpl:string)&nbsp;{ &nbsp;&nbsp;@Component({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selector:&nbsp;'dynamic-component', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;template:&nbsp;tmpl, &nbsp;&nbsp;}) &nbsp;&nbsp;class&nbsp;CustomDynamicComponent&nbsp;&nbsp;implements&nbsp;IHaveDynamicData&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Input()&nbsp;&nbsp;public&nbsp;entity:&nbsp;any; &nbsp;&nbsp;}; &nbsp;&nbsp;//&nbsp;a&nbsp;component&nbsp;for&nbsp;this&nbsp;particular&nbsp;template &nbsp;&nbsp;return&nbsp;CustomDynamicComponent;}一种将组件注入NgModule的方法createComponentModule&nbsp;(componentType:&nbsp;any)&nbsp;{ &nbsp;&nbsp;@NgModule({ &nbsp;&nbsp;&nbsp;&nbsp;imports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PartsModule,&nbsp;//&nbsp;there&nbsp;are&nbsp;'text-editor',&nbsp;'string-editor'... &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;componentType&nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;}) &nbsp;&nbsp;class&nbsp;RuntimeComponentModule &nbsp;&nbsp;{ &nbsp;&nbsp;} &nbsp;&nbsp;//&nbsp;a&nbsp;module&nbsp;for&nbsp;just&nbsp;this&nbsp;Type &nbsp;&nbsp;return&nbsp;RuntimeComponentModule;}如何创建ComponentFactory&nbsp;(并缓存它)public&nbsp;createComponentFactory(template:&nbsp;string) &nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;Promise<ComponentFactory<IHaveDynamicData>>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;factory&nbsp;=&nbsp;this._cacheOfFactories[template]; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(factory)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("Module&nbsp;and&nbsp;Type&nbsp;are&nbsp;returned&nbsp;from&nbsp;cache") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise((resolve)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(factory); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;unknown&nbsp;template&nbsp;...&nbsp;let's&nbsp;create&nbsp;a&nbsp;Type&nbsp;for&nbsp;it &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;type&nbsp;&nbsp;&nbsp;=&nbsp;this.createNewComponent(template); &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;module&nbsp;=&nbsp;this.createComponentModule(type); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise((resolve)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.compiler&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.compileModuleAndAllComponentsAsync(module) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then((moduleWithFactories)&nbsp;=> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;factory&nbsp;=&nbsp;_.find(moduleWithFactories.componentFactories&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,&nbsp;{&nbsp;componentType:&nbsp;type&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._cacheOfFactories[template]&nbsp;=&nbsp;factory; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(factory); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;});}如何使用上述结果的代码片段&nbsp;&nbsp;//&nbsp;here&nbsp;we&nbsp;get&nbsp;Factory&nbsp;(just&nbsp;compiled&nbsp;or&nbsp;from&nbsp;cache) &nbsp;&nbsp;this.typeBuilder&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.createComponentFactory(template) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then((factory:&nbsp;ComponentFactory<IHaveDynamicData>)&nbsp;=> &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Target&nbsp;will&nbsp;instantiate&nbsp;and&nbsp;inject&nbsp;component&nbsp;(we'll&nbsp;keep&nbsp;reference&nbsp;to&nbsp;it) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.componentRef&nbsp;=&nbsp;this &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.dynamicComponentTarget&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.createComponent(factory); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;let's&nbsp;inject&nbsp;@Inputs&nbsp;to&nbsp;component&nbsp;instance &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;component&nbsp;=&nbsp;this.componentRef.instance; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component.entity&nbsp;=&nbsp;this.entity; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//... &nbsp;&nbsp;&nbsp;&nbsp;});包含所有细节的完整描述读这里，或观察工作实例