具有功能RouterLink的Angular2动态HTML [英] Angular2 Dynamic HTML with functional RouterLink

问题描述

长期用户，首次提问者！我一直试图在两天的时间里弄清楚这一点，但无济于事，所以我们开始吧.

Long time user, first time question asker! I've been trying to figure this out for the better part of two days to no avail, so here we go.

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

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

I am using http to get page content in the form of HTML from the WordPress API. So I have a template like this:

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

和"contentHTML"是组件中的字符串变量，并通过API调用异步分配了一个值，如下所示:

and "contentHTML" is a string variable in the component and assigned a value asynchronously via the API call to something like this:

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

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

and I want that routerLink to work. Of course routerLink could be anything that's valid in a template.

如果无法完成上述操作

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

If the above isn't going to work, what about a way to interpret the incoming HTML and add routerLinks on the fly to replace standard hrefs?

推荐答案

我遇到了同样的问题，我遵循了这个答案，但是在导入 DynamicComponentModule 的代码中添加了一个简单的修改，但添加了导入:[RouterModule]

I came across the same issue, I followed this answer, but added a simple modification in the code where you import DynamicComponentModule, but added imports: [RouterModule]

因此操作步骤如下: ng-dynamic :

So the steps would be as following install ng-dynamic:

npm install --save ng-dynamic

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

Then use the following import and code:

import { DynamicComponentModule } from 'ng-dynamic';

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

然后而不是:

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

使用:

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

希望这会有所帮助！

这篇关于具有功能RouterLink的Angular2动态HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！