具有功能 RouterLink 的 Angular2 动态 HTML答案

【问题标题】：Angular2 Dynamic HTML with functional RouterLink具有功能 RouterLink 的 Angular2 动态 HTML
【发布时间】：2017-06-26 16:14:31
【问题描述】：

老用户，第一次提问！这两天我一直在尝试解决这个问题，但无济于事，所以我们开始吧。

在 Angular2 中从外部源动态编译模板？

我正在使用 http 从 WordPress API 获取 HTML 形式的页面内容。所以我有一个这样的模板：

而“contentHTML”是组件中的一个字符串变量，并通过API调用异步分配一个值，如下所示：

我希望 routerLink 能够正常工作。当然 routerLink 可以是任何在模板中有效的东西。

如果以上不可行

如果上述方法不起作用，那么如何解释传入的 HTML 并动态添加 routerLinks 以替换标准 href？

【问题讨论】：

复制到stackoverflow.com/questions/44949958/… 本质上只是为你的整个innerHtml做一个点击监听并检查你的routerLink属性

标签： angular angular2-routing angular2-template angular2-directives

【解决方案1】：

不使用动态运行时编译的一种可能解决方案使用哈希定位策略时是使用以下 HTML

<a onclick="window.location.reload()" href="#/pages/Home">Click</a>

/pages/Home 是一个角度路线。这将被设置为一个div，如下所示

<ng-container *ngIf='content'>
  <div [innerHTML]="content.text"></div>
</ng-container>

这将触发目的地的重新加载，从而将东西移交给角度路由器。

更新 1

我使用自定义事件来解决这个问题。我添加了一个自定义js如下

function navigate_in_primary(url) {
    var evt = new CustomEvent('content_navigate', { detail: { url: url, primary: true } });
    window.dispatchEvent(evt);
}

我在注入app.module的自定义服务的构造函数中使用 RxJs 监听此事件

Observable.fromEvent<Event>(window, 'content_navigate')
.subscribe((event)=>{
    this.router.navigateByUrl(event.detail.url);
})

最后，我的 HTML

<a onclick="navigate_in_primary('/pages/home.aspx')" class="grey-button">SIGN IN</a>

【讨论】：

仅仅为了解决这个问题而改变哈希定位策略并不是一个好主意
同意。但是我有很多其他情况我不得不使用哈希，因为我的应用程序是基于科尔多瓦的移动应用程序。我将改写我的答案以反映相同的内容。
很好地使用 CustomEvent.... 一次保存一个组件或使用服务的大量事件！
我见过的最简单最好的解决方案。
使用浏览器事件作为动态内容和编译的 Angular 代码之间的中介非常聪明。赞一个。

【解决方案2】：

我遇到了同样的问题，我关注了this answer，但在导入 DynamicComponentModule 的代码中添加了一个简单的修改，但添加了 imports: [RouterModule]

所以步骤如下安装ng-dynamic：

npm install --save ng-dynamic

然后使用以下导入和代码：

import { DynamicComponentModule } from 'ng-dynamic';

@NgModule({
   imports: [
       ...
       DynamicComponentModule.forRoot({imports: [RouterModule]}),
       ...
   ],
   ...
})
export class AppModule {}

然后代替：

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

用途：

<div *dynamicComponent="contentHTML"></div>

希望这会有所帮助！

【讨论】：

ng-dynamic 有很多未解决的问题。使用 Angular v5+ 构建产品仍然可行吗？
抱歉回复晚了，我用 Angular 5+ 很好用，刚开始升级 angular 时需要更新到最新版本
@AdhamSabry 我很好奇你是否设法在你的设置中使用了 AOT 编译器？
@tomaszBlachut：是的

【解决方案3】：

经过大量挖掘，我发现Angular 2.1.0 create child component on the fly, dynamically 的答案对让事情顺利进行非常有用！

秘方！！！

结帐 complete Plunker example yurzui 了解详细信息，但简而言之，请确保创建运行时编译组件的 DynamicHtmlModule 类引用了 RouterModule 模块。否则动态模板中使用的 routerLink 指令将不起作用。我在下面的关键代码中加粗了。

@NgModule({
  imports: [CommonModule, <strong>RouterModule</strong>],
  declarations: [decoratedCmp]}) class DynamicHtmlModule { }

  return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
   .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => {
     return moduleWithComponentFactory.componentFactories
      .find(x => x.componentType === decoratedCmp);
  });
}

您的模板可能使用的任何其他指令或组件也是如此。您必须确保您的 DynamicHtmlModule 正确引用它们以使它们工作。

【讨论】：