具有功能性RouterLink的Angular2动态HTML

Question

长时间用户，第一次提问者！我一直试图在两天的大部分时间里找出这一点无济于事，所以我们走了。

Angular2中来自外部来源的动态编译模板？

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

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

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

    <a routerLink="/help/faq.html"> </a>

我想让routerLink工作。当然，routerLink可以是模板中有效的任何东西。

如果上述情况不可能

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

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

Answer 2

我遇到了同样的问题，我跟着this answer，但在导入 DynamicComponentModule 的代码中添加了一个简单的修改，但添加了导入：[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>

希望这有帮助！

Answer 3

经过多次挖掘，我发现Angular 2.1.0 create child component on the fly, dynamically的答案对于让事情有效非常有用！

SECRET SAUCE !!!

结帐 的    complete Plunker example 有关详细信息，请参阅yurzui，但简而言之，请确保创建运行时编译组件的 DynamicHtmlModule 类具有对 RouterModule <的引用/ strong>模块。否则，动态模板中使用的 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 正确引用它们才能使它们正常工作。