在外部加载的HTML上激活Angular模板语法

如何解决在外部加载的HTML上激活Angular模板语法

我当前的目标是从外部文件中使用Angular动态模板语法加载HTML，将HTML动态添加到空白的本地组件中，并且从组件中检索到该组件后，仍然能够使用Angular的模板语法来呈现该组件。服务器。我这样做的原因是，我可以单独更新外部文件上的数据，而不必每次都构建和上载我的整个Angular项目（在我当前的开发人员环境下，这很难做到）。我是Angular的新手，所以我知道自己做错了事，但是我一直没有找到实现此目标的正确方法。这是我当前尝试的快照：

要记住的一点：我目前仅限使用Angular 6.2.1版。

我想从服务器外部加载一些HTML的示例：

<!-- header.component.html -->

<div *ngFor="let anApp of this.listOfApps">
    <div class="dropdown" *ngIf="anApp.Components?.length > 1">
        <button>{{anApp.appName}}</button>
        <div class="dropdown-wrap">
            <ng-container *ngFor="let subApp of anApp.Components; first as subFirst">
                <div class="navlink" *ngIf="!subFirst">
                    <a href={{subApp.URL}}>{{subApp.appName}}</a>
                </div>
            </ng-container>
        </div>
    </div>
</div>

这是我当前在“标头”组件中实现的尝试（使用localhost服务器进行测试）。我暂时剥离了所有高级功能的组件：

//header.component.ts

import { Component,Input} from '@angular/core';
import { ComponentLoadService } from '../componentload.service';

@Component({
  template: `
    <header [innerHTML]='htmlData'></header>
  `,})
export class HeaderComponent implements OnInit {
  @Input() htmlData: string;

  BackendTemplateURL = 'http://localhost:4200/assets/';

  constructor(private compLoad: ComponentLoadService) {
    this.compLoad.getData(this.BackendTemplateURL + 'header.component.html')
    .subscribe((data) => {
      this.htmlData = data;
    },error => console.log(error));
  }

}

这是我编写的用于从外部文件加载数据的简单组件加载服务：

//componentload.service.ts    

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ComponentLoadService {

  constructor(private http: HttpClient) {
  }

  getData(url: string): Observable<any> {
    return this.http.get(url,{responseType: 'text'});
  }

}

我对这个实现的期望并不高，但是至少它确实成功提取了HTML并将其插入到“ innerHTML”属性中。但是，模板语法保持为纯文本格式，并且不会挂接到角度引擎上。在允许Angular模板语法的同时还能实现这种设计模式吗？