web-dev-qa-db-ja.com

TypeScriptでHTMLファイルを文字列としてインポートすることは可能ですか？

タイトルが言っているようにできるのかしら。

たとえば、Angular2プロジェクトに取り組んでおり、http要求を少なくするためにテンプレートを外部URLとして設定しないようにしたいとします。それでも、コンポーネント内にすべてのHTMLを書きたくはありません。十分な大きさがあるか、開発者とは異なるファイルでデザイナーに作業してもらいたいからです。

だからここに最初の解決策があります：

ファイル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テンプレートを作成するデザイナー/開発者にとってこれは悪いことです。

私が達成しようとしているのは、.tsではなく。htmlファイルをインポートする方法を見つけることです。

つまり、.htmlファイルをTypeScriptの文字列としてインポートできますか？

javascripthtmlimporttypescriptangular
25
Vassilis Pits

これを今すぐ行うことができます：

import "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template:  require("template.html"),
})

これにより、コンポーネントの依存関係リストに「template.html」が含まれ、ビルダーにバンドルできます（実際には、AMDを使用する方が理にかなっています）

ただし、提案されたように、webpackを使用することをお勧めします。

これを見てください スターターパック

[〜＃〜] update [〜＃〜]htmlモジュールを次のように宣言できるようになりました。

declare module "*.html" {
    const content: string;
    export default content;
}

そして次のように使用します：

import * as template from "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template: template
})
14
Veikedo

上記の@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
})
1
isolationism