angularjs - 无需要求即可在 typescript 中导入模板

Question

我正在使用带有 angular 1.5 组件的 typescript 。我有一个定制设计的装饰器，我通过 require 发送模板。它有效，除非我收到 tslint 警告。 (我不想关闭这个规则)

require() style import is forbidden

这是我的组件

import './main.template.html';

const app: ng.IModule = angular.module('app');
@Component(app, {
  selector: 'mainComponent',
  controllerAs: 'ctrl',
  styleUrls: '',
  template: require('./main.template.html')
})
class MainComponent extends BaseComponent {
   constructor() {
     super();
   }
}

这是我的装饰器

export const Component = function(module: ng.IModule, options: {
  selector: string,
  controllerAs?: string,
  styleUrls?: string,
  template?: string,
  templateUrl?: string
}) {
return (controller: Function) => {
   module.component(options.selector, angular.extend(options, {  controller: controller }));
  };
};

我试图传递 templateUrl 而不是模板，但我得到了找不到文件的运行时错误。

我也尝试过将模板作为变量导入，但它给出了编译时错误，看起来它不受支持。

import mytemplate: string from './main.template.html';

我正在使用 webpack。因此，不能使用从根开始的绝对路径。

你知道如何在不使用 require 的情况下在 typescript 中导入模板吗？

Answer 1

对于 templateUrl 错误，请检查您的引用资料和目录结构。

或者，在模板中插入 html 数据:-

@Component(app, {
selector: 'mainComponent',
controllerAs: 'ctrl',
styleUrls: '',
template: `<div>//content
           </div>`
})