在Angular 1.x中,我们可以使用
HTML标签ng-bind-html,结合
JavaScript调用$sce.trustAsHTML()实时地插入HTML.这使我们有80％的方式,但是在使用角度标签时不会工作,例如,如果您插入使用了ng重复或自定义指令的HTML.
要做到这一点,我们可以使用custom directive that called $compile.
在角度2中所有这一切的等价物是什么？我们可以使用[inner-html]绑定,但这只适用于非常简单的HTML标签,例如< b>.它不会将自定义角度2指令转换为正常运行的HTML元素. (很像Angular 1.x,没有$编译步骤).对于Angular 2,$compile的等价物是什么？
解决方法
在Angular2中,您应该使用
DynamicComponentLoader在页面上插入一些“编译内容”.所以例如如果你想编译下一个html：
<div>
<p>Common HTML tag</p>
<angular2-component>Some angular2 component</angular2-component>
</div>
那么您需要使用此html作为模板创建组件(让我们称之为CompiledComponent),并使用DynamicComponentLoader在页面上插入此组件.
@Component({
selector: 'compiled-component'
})
@View({
directives: [Angular2Component],template: `
<div>
<p>Common HTML tag</p>
<angular2-component>Angular 2 component</angular2-component>
</div>
`
})
class CompiledComponent {
}
@Component({
selector: 'app'
})
@View({
template: `
<h2>Before container</h2>
<div #container></div>
<h2>After conainer</h2>
`
})
class App {
constructor(loader: DynamicComponentLoader,elementRef: ElementRef) {
loader.loadIntoLocation(CompiledComponent,elementRef,'container');
}
}
UPD您可以在loader.loadIntoLocation()调用之前动态创建组件：
// ... annotations
class App {
constructor(loader: DynamicComponentLoader,elementRef: ElementRef) {
// template generation
const generatedTemplate = `<b>${Math.random()}</b>`;
@Component({ selector: 'compiled-component' })
@View({ template: generatedTemplate })
class CompiledComponent {};
loader.loadIntoLocation(CompiledComponent,'container');
}
}
我个人不喜欢它,它看起来像一个肮脏的黑客给我.但这里是the plunker
PS请注意,此刻,角度2正在积极发展.所以情况可以随时改变.
