Angular 6 - 路由器插座 - 使用 CSS 加载外部 HTML

Question

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

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.

For ex, We need to have a home.html and home.ts file for the below routing. Instead of having the html code inside home.html, I thought of loading from DB as a text and show the same. Here, I would like to get the corresponding css code also from DB without hard-coding css code in html.

Also, I need the corresponding JavaScript functions (say for dynamic html, i may have a delete link or cancel link) in a separate file. 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?

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

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.

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

Here testhtml is your html getting from db. For more information take a look at this .