Question

我使用的是角度2.1，并希望动态导入模板，后端是一个字符串。

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

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

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

如果无法从字符串模板创建组件，是否可以使用延迟加载组件来执行此操作？我看到路由器的延迟加载但是我在路线下并且只想在某些组合上加载延迟

有可能吗？我知道通过执行此https://stackoverflow.com/a/39044539/541867

可以使用角度2 beta或RC

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

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

Answer 1

如果您在innerHtml属性中注入模板并使用DomSanitizer，它将像组件一样将其翻译，从而为您提供延迟加载效果。

select top (select count(*) from myTable) * from myTable

Answer 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>

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

2 个答案: