Question

我正在寻找如何添加html这是一个Web服务的返回，角度。问题是角度指令不会呈现。这是我的源代码

//tohtml.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
  selector: '[appToHtml]'
})
export class ToHtmlDirective {
constructor( private el: ElementRef) {}


tohtml() {
  //it is assumed that this is the return of the webservice
  this.el.nativeElement.innerHTML = '<a 
  [routerLink]="/link/to/page">helpful!
   </a>';
  }
}

component.html的代码

<div id="wrapper">

<h1 appToHtml>
  Hello World!
</h1>
</div>

代码可以工作，但是[routerLink]的渲染不起作用，请点击hellppp !!!

Answer 1

通过在指令中设置innerHTML prop，您只需设置DOM和属性。但是这个内容需要通过角度来编译，以允许类似角度的行为（绑定指令，实例化组件等）。

Angular没有像angularJS那样准备好使用编译器（它有$ compile）。您需要使用第三方库，例如

https://www.npmjs.com/package/p3x-angular-compile

或

https://www.npmjs.com/package/ngx-dynamic-template

这些lib带有方便的例子。您应该很容易理解如何使用它们。请注意，您不能将AOT与此类渲染系统一起使用。

ngx-dynamic-template用法的版本：

如果您的动态模板需要某个组件指令，则必须配置ngx-dynamic-template以导入相应的模块。

您可以在案例中创建一个动态模块

@NgModule({
    imports: [
        RouterModule
    ],
    exports: [
        RouterModule
    ]
})

export class DynamicModule {}

然后在appModule或SharedModule中导入ngx

@NgModule({
    imports: [
        ...
        NgxDynamicTemplateModule.forRoot({extraModules: [DynamicModule]})
        ...
    ],

然后你就可以毫无问题地使用routerLink（我刚刚测试过）

in cmpt : 
htmlTemplate = `<a [routerLink]="['dress-options']">link to user component</a>`;

in template : 
<div dynamic-template [template]="htmlTemplate"></div>

Answer 2

对于我来说最新的角度版本只有这个模块可以正常工作：https://www.npmjs.com/package/ngx-dynamic-template 对于angular4，v2.1.24，对于angular5

，v.2.3.0

Angular 2：从webservice渲染角度html组件

2 个答案: