Angular 7：从组件内的资产文件夹加载html页面？答案

【问题标题】：Angular 7: load html page from assets folder within component?Angular 7：从组件内的资产文件夹加载html页面？
【发布时间】：2018-12-27 00:33:49
【问题描述】：

在名为 Window 的应用程序组件中，我需要根据服务返回的值每次显示不同的 HTML。

不同的 html 文件保存在 assets 文件夹中。例子： - 资产/guide1.html - 资产/guide2.html - 资产/guide3.html .... 很快。并且所有这些文件都有静态内容。

我们为应用程序提供的服务返回文件名。该组件将知道 html 文件名，并且应该在其模板中加载 html。如何实现？

是否可以创建一个模板Url 可以作为表达式的组件？下面是来自 angularjs 的示例代码：

app.directive('headermenu', function() {
  return {
    restrict: 'E',
    scope: {
      userRole : '='
    },
    link: function($scope)
    {
      $scope.$watch('userRole', function(userRole)
      {
        if (userRole && userRole.length)
        {
            $scope.dynamicTemplateUrl = 'assets/common/headerMenu' + userRole + '.html';
        }
      });
    },

    template: '<ng-include src="dynamicTemplateUrl"></ng-include>'
  };
});

来自此链接的相同代码：plunker

ng-include 是否从 assets 文件夹加载 html？ Angular 7 如何实现这一点？

【问题讨论】：

标签： angular-cli angular7

【解决方案1】：

您可以使用HttpClient 加载文件，方法是将其注入服务的构造函数中，然后试试这个

let path = 'assets/' + {fileName} + '.html';
this._httpClient.get(path, {responseType: "text"}).subscribe(
data => {
//now you have the file content in 'data'
});

service到html的绑定，可以参考this question。

【讨论】：