web-dev-qa-db-fra.com

Est-il possible d'importer un fichier HTML sous forme de chaîne avec TypeScript?

Je me demande s'il est possible de faire comme le dit le titre.

Par exemple, disons que nous travaillons sur un projet Angular2 et que nous voulons éviter de définir le modèle comme une URL externe afin d'avoir moins de requêtes http. Nous ne voulons toujours pas écrire tout le code HTML dans le composant, car il est peut-être assez grand ou nous voulons que les concepteurs travaillent dans des fichiers différents de ceux des développeurs.

Voici donc une première solution:

Fichier template.html.ts Transformez un fichier en .ts en quelque chose comme ceci:

export const htmlTemplate = `
   <h1>My Html</h1>
`;

Ensuite, dans mon composant, je peux l'importer comme ceci:

import { Component } from 'angular2/core';
import {RouteParams, RouterLink} from 'angular2/router';
import {htmlTemplate} from './template.html';

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

En fait, cela fonctionne parfaitement, mais vous perdez l'intelligence IDE HTML), ce qui est mauvais pour le concepteur/développeur qui crée les modèles HTML.

Ce que j'essaie de réaliser, c'est de trouver un moyen d'importer . Html fichiers et non .ts.

Est-il donc possible d'importer un fichier .html sous forme de chaîne en TypeScript?

javascripthtmlimporttypescriptangular
25
Vassilis Pits

Vous pouvez le faire maintenant:

import "template.html";

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

cela inclura "template.html" dans la liste des dépendances de votre composant et vous pourrez ensuite le regrouper avec votre générateur (en fait, cela a plus de sens avec AMD)

Cependant, comme on vous l'a suggéré, il vaut mieux utiliser webpack.

Jetez un oeil à ce pack de démarrage

[~ # ~] mettez à jour [~ # ~] maintenant vous pouvez déclarer un module html comme ceci:

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

et l'utiliser comme ça:

import * as template from "template.html";

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

@ La réponse de Veikedo ci-dessus fonctionne presque; Cependant, le * as portion signifie que l'ensemble du module est affecté au pointeur template alors que nous voulons uniquement le contenu. L'erreur du compilateur ressemble à ceci:

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'.

L'instruction d'importation corrigée (au moment de la rédaction, à l'aide de TypeScript 2.3.3) est la suivante:

import template from "template.html";

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