Javascript Angular 2：从webservice呈现Angular html组件

我正在寻找如何添加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>';
  }
}

//tohtml.directive.ts
从“@angular/core”导入{Directive，ElementRef，OnInit}；
@指示({
选择器：“[appToHtml]”
})
将类导出到HtmlDirective{
构造函数（私有el:ElementRef）{}
tohtml（）{
//假设这是Web服务的返回
this.el.nativeElement.innerHTML='非常有用！
';
}
}

component.html的代码

<div id="wrapper">

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

你好，世界！

---

代码可以工作，但是[routerLink]的呈现不工作，请参见Hellpp

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

angularJS没有像angularJS（有$compile）那样的现成编译器。您需要使用第三方库，如

或

这些库提供了方便的示例。你应该很容易理解如何使用它们。 请注意，在这种渲染系统中不能使用AOT

ngx动态模板使用版本：

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

您可以在您的案例中创建这样的动态模块

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

export class DynamicModule {}

然后在appModule或SharedModule中导入ngx时

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

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

cmpt中的

：
htmlTemplate=`链接到用户组件'；
在模板中：

对于我来说，最新的angular版本仅此模块工作正常：

---

v2.1.24对于angular4，v.2.3.0是针对angular5的

这是原始代码吗，它不起作用？您是否有任何错误，或者渲染只是默默地失败？这不起作用，因为您将routerLink渲染为html，需要先渲染它。你可以通过一个导航到路由的函数来实现这一点。没有错误，@WesleyCoetzee:example please！！！非常感谢你的回答，我实现了编译器p3x angular compile，但没有结果，那就是不编译RouterLink我从未尝试过p3x angular compile，但我已经使用了ngx动态模板，它工作得很好。routerModule是否正确导入到您的应用程序中？是的，我的rooterModule已正确导入且工作正常，对于ngx dynamic template，其生成我错误：module/node_modules/ngx dynamic template/index.d.ts的元数据版本不匹配，找到版本4，预期为3。有什么建议吗？您好，这是配置“ngx动态模板”：“^2.2.0”、“@angular/common”：“^4.2.4”、“@angular/compiler”：“^4.2.4”、“@angular/core”：“^4.2.4”，您好，我刚刚升级到angular5，我测试了ngx动态模板2.2.0的示例及其工作，但是使用routerLink，它的make error不能绑定到“routerLink”，因为它不是“a”的已知属性。有一个与我相同问题的链接（）

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

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