javascript - Angular 6-路由器出口-使用CSS加载外部HTML(Angular 6 - router-outlet - Loading external HTML with CSS)

Question

I am trying to develop json based dynamic template using Angular 6.

(我正在尝试使用Angular 6开发基于json的动态模板。)

There are some use cases where I would like to load external html (might be from DB as a text ) with css (as a separate file as a text from DB) and use this for the corresponding router-outlet html.

(在某些用例中，我想用css（作为来自DB的文本作为单独的文件）加载外部html（可能从DB作为文本），并将其用于相应的路由器出口html。)

For ex, We need to have a home.html and home.ts file for the below routing.

(例如，对于下面的路由，我们需要有一个home.html和home.ts文件。)

Instead of having the html code inside home.html, I thought of loading from DB as a text and show the same.

(我没有在home.html中包含html代码，而是想到了从DB加载为文本并显示相同内容。)

Here, I would like to get the corresponding css code also from DB without hard-coding css code in html.

(在这里，我也想从DB中获取相应的CSS代码，而无需在html中对CSS代码进行硬编码。)

Also, I need the corresponding JavaScript functions (say for dynamic html, i may have a delete link or cancel link) in a separate file.

(另外，我需要在单独的文件中使用相应的JavaScript函数（例如，对于动态html，我可能具有删除链接或取消链接）。)

It would be similar to typescript.

(它将类似于打字稿。)

Can I load typescript file also dynamically?

(我可以动态加载打字稿文件吗？)

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' }
]

I can go with the below approach.

(我可以采用以下方法。)

How do I load an HTML page in a <div> using JavaScript?

(如何使用JavaScript在<div>中加载HTML页面？)

But, trying to understand if there is any better approach for Angular 6.

(但是，尝试了解Angular 6是否有更好的方法。)

  ask by user1578872 translate from so

Answer 1

As I think the approach in the link is a good way of doing it.

(我认为链接中的方法是一种很好的方法。)

Also you can use angular innerHtml property also.

(您也可以使用angular innerHtml属性。)

<div class="home" [innerHtml]="testhtml"></div>

Here testhtml is your html getting from db.

(这里的testhtml是从db获取的html。)

For more information take a look at this .

(有关更多信息，请查看此 。)