具有功能 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:

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

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

我希望那个 routerLink 工作.当然，routerLink 可以是任何在模板中有效的东西.

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

如果以上都不可能

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

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

推荐答案

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

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?

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

解决方案

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]

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

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

npm install --save ng-dynamic

然后代替:

import { DynamicComponentModule } from 'ng-dynamic';

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

使用:

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

希望这有帮助！

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