Question

我正在使用带有1.5角组件的打字稿。我有一个定制设计的装饰器，我通过require发送模板。除了我得到一个tslint警告之外，它有效。（我不想关闭这个规则）

禁止使用require（）样式导入

这是我的组件

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>`
})

在typescript中导入模板而不需要

1 个答案: