Angular 2 将动态模板解析为字符串答案

【问题标题】：Angular 2 parse dynamic template as stringAngular 2 将动态模板解析为字符串
【发布时间】：2016-11-20 01:26:30
【问题描述】：

我正在使用 Angular 2.1 并希望动态导入模板，女巫是来自后端的字符串。

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

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

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

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

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

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

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

【问题讨论】：

我不确定我是否做对了，但你可以在变量中存储一个字符串并在没有数百万个字符串时使用*ngIf...我的意思是<my-component><my nested-component *ngIf="string == 'nested'"></my-component> 或如果您有很多这些组件，您可以将它们存储在一个数组中并使用*ngFor。我知道它可能不专业，但当我在做类似的事情时它就起作用了。
我添加了我的第一个模板字符串是什么样子的要点（但将来会有更多和更多不同的）我认为它不会像你说的那样工作。我错了吗？

标签： angular angular2-template angular2-components

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

出于安全原因，在加载组件后将字符串转换为组件会被阻止。 [https://angular.io/guide/security]

构建动态模板服务似乎是最佳实践。从服务器发送将设置为基类的值，我认为可以提供您想要做的事情。

有一个离线模板编译器，(https://angular.io/guide/security#offline-template-compiler) https://angular.io/guide/dynamic-form#dynamic-template 中有一个显示动态组件创建的示例。

我认为这只需要一点点重构拥有动态组件的方法，这被称为最佳实践。

回答，如何将字符串翻译成组件需要绕过bypassSecurityTrustHtml()的安全性。我更喜欢为此使用管道。 https://angular.io/guide/security#bypass-security-apis

我在论坛https://forum.ionicframework.com/t/inserting-html-via-angular-2-use-of-domsanitizationservice-bypasssecuritytrusthtml/62562/2找到了这个

import {Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
    name: 'safe'
})
export class SafePipe implements PipeTransform {

constructor(protected _sanitizer: DomSanitizer) {

}

    public transform(value: string, type: string = 'html'): SafeHtml |  SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
        case 'html': return     this._sanitizer.bypassSecurityTrustHtml(value);
        case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);
        case 'script': return this._sanitizer.bypassSecurityTrustScript(value);
        case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);
        case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);
        default: throw new Error(`Invalid safe type specified:     ${type}`);
    }
}

}

要实现只需使用<component-container [innerHtml]='this.safteyPipe.transform(TemplateComponentString)'></component-container>

【讨论】：