我想知道是否有可能像标题所说的那样做。
例如,假设我们正在处理一个Angular2项目,我们希望避免将模板设置为外部url,以减少http请求。尽管如此,我们不想在组件中编写所有的HTML,因为它可能足够大,或者我们希望设计者在与devs不同的文件中工作。
所以这是第一个解决方案:
File template.html.ts将文件转换为.ts格式,如下所示:
export const htmlTemplate = `
<h1>My Html</h1>
`;
然后在我的组件中,我可以像这样导入它:
import { Component } from 'angular2/core';
import {RouteParams, RouterLink} from 'angular2/router';
import {htmlTemplate} from './template.html';
@Component({
selector: 'home',
directives: [RouterLink],
template: htmlTemplate,
})
实际上,这可以很好地工作,但是您正在失去IDE的HTML智能,所以这对创建HTML模板的设计者/开发人员来说是不好的。
我想要实现的是找到一种方法来导入.html文件,而不是.ts。
所以可以在TypeScript中将.html文件作为字符串导入吗?
发布于 2016-04-16 16:03:35
您现在可以这样做:
import "template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: require("template.html"),
})
这会将"template.html“包含到组件的依赖项列表中,然后您可以将其与构建器捆绑在一起(实际上,使用amd
更有意义)
但是,正如您所建议的那样,最好使用webpack
。
看一下这个starter pack
更新现在你可以像这样声明一个html
模块:
declare module "*.html" {
const content: string;
export default content;
}
像这样使用它:
import * as template from "template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: template
})
发布于 2017-08-04 03:23:39
@Veikedo上面的答案几乎可以工作;然而,* as
部分意味着整个模块被分配给指针template
,而我们只需要内容。编译器错误如下所示:
ERROR in /raid/projects/pulse/angular-components/src/lib/card/card.ts (143,12): Argument of type '{ moduleId: string; selector: string; template: typeof '*.html'; encapsulation: ViewEncapsulation...' is not assignable to parameter of type 'Component'.
更正后的导入语句(在编写本文时使用TypeScript 2.3.3)如下所示:
import template from "template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: template
})
发布于 2019-12-14 23:09:13
最简单的答案:
用法:templateUrl
示例:
@Component({
selector: 'home',
directives: [RouterLink],
templateUrl: './template.html',
})
注意:.html文件必须位于相同的组件文件夹中,否则您必须修改路径
https://stackoverflow.com/questions/36649795
复制相似问题