Angular 2 将动态模板解析为字符串 [英] Angular 2 parse dynamic template as string

问题描述

我正在使用 angular 2.1 并且想要从后端动态导入一个模板女巫是一个字符串.

I'm using angular 2.1 and want to dynamically import a template witch is a string from the backend.

我已经使用 ComponentFactoryResolver 来动态加载我的父容器，现在我需要创建他的内容，看起来像这样:

I already use ComponentFactoryResolver to load dynamically my parent container, now I need to create his content witch can look like this:

<my-component>
    <my-nested-component>
    <my-nested-component>
<my-component>

组件已经在我的应用程序中，我只需要从模板字符串创建它们并将它们加载到父级中.

Components are already in my applications, I just need to create them from the template string and load them into the parent.

如果无法从字符串模板创建组件，是否可以使用延迟加载组件来实现?我看到路由器的延迟加载，但在这里我在一条路由下，只想在某些组件上延迟加载

If create components from string template is not possible, is it possible to do it with lazy loading components ? I see lazy loading with the router but here I under a route and want lazy loading on some composent only

有可能吗?我知道通过这样做可以使用 angular 2 beta 或 RC https://stackoverflow.com/a/39044539/541867

Is it possible ? I know it was possible with angular 2 beta or RC by doing this https://stackoverflow.com/a/39044539/541867

PS:如果你想知道为什么我需要一个模板作为来自后端的字符串，那是因为某些组件的 UI 来自外部插件，他们只使用一组可用的组件是应用程序但可以做他们想要的布局，所以我不能在 @Component 模板下使用它.

PS: if you want to know why I need to have a template as string coming from the backend it's because the UI of some component is coming from external plugin, they just use a set of component available is the application but can do the layout they want so I can't have it under a @Component template.

这是我尝试加载的第一个字符串模板的要点:https://gist.github.com/jaumard/918dfc573b01263467e89adc8ad86f77

here is a gist of a first string template I try to load: https://gist.github.com/jaumard/918dfc573b01263467e89adc8ad86f77

推荐答案

如果你在innerHtml属性中注入你的模板并使用DomSanitizer，它会像一个组件一样翻译它，给你延迟加载的效果.

If you inject your template in the innerHtml attribute and use the DomSanitizer, it will translate it just like a component, giving you the lazy load effect.

<div [innerHTML]="myComponentsTemplate"></div>

这篇关于Angular 2 将动态模板解析为字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！