Jak importować .html fragment używając składni ES6 w maszynopisie

Question

Jak zaimportować szablon HTML z ścieżkę względną tak:

import customSelectHtml from "./custom-select.html!text"; 

maszynopis kompilator narzeka, że ​​nie może znaleźć modułu. Próbowałem utworzyć definicję modułu otoczenia, ale nie pozwala to na względne ścieżki w nazwach modułów. Używam SystemJS jako program ładujący moduły.

Answer 1

To niemożliwe.

Ze względu na definicję, co jest module w pismach maszynowych, i o ile wiem w ES6 javascript (import). Moduł nie może być html. Powszechnym podejściem jest zaimportowanie modułu javascript, który eksportuje ciąg znaków zawierający html, css, cokolwiek. Ale to nie jest import pliku z surowym html.

Być może chcesz również rzucić okiem na html imports, ale to zupełnie inna sprawa.

Answer 2

nie wiem o SystemJS, ale jest to z pewnością możliwe Webpack i html-loader

Answer 3

Można je importować za pomocą wymagają składnię

1) Utwórz app.d.ts plik i tak wymagają definicji maszynopis wie, że to jest funkcja. (Don; t trzeba dodać dowolną bibliotekę Ponadto wsparcie systemJs wymagają składnia)

declare function require(params:string): any; 

2) Teraz można zaimportować HTML za pomocą szablonu var = require ('! ./ zamówienie select.html tekst')

znalazłem to nawet lepiej, ponieważ można używać wymagają inline

var directive = { 
    template: require('./custom-select.html!text'), 
    scope: {} 
} 

Answer 4

nie używam maszynopis, ale mam użyć ES6. Może ci się przydać.

Sposób rozwiązania tego problemu polega na zadeklarowaniu ciągów szablonów za pomocą "cudzysłowów". Działa to dobrze dla mnie, byłbym szczęśliwy wiedząc, czy ktoś myśli, że to zły nawyk.

Poniżej fragment z Angular (-ui-router).

index.js

var indexTemplate = ` 
<div> 
    <h1>{{ Index page }}</h1> 
</div 
` 

export {indexTemplate} 

config.js

import { indexTemplate } from './index.js' 

function config($stateProvider){ 
    $stateProvider.state('index', { 
     url: '/', 
     controller: 'indexController', 
     template: indexTemplate 
    }) 
} 

Dla kompletności, to zakłada IndexController zdefiniowane w innym miejscu. Ponadto ta funkcja konfiguracyjna jest eksportowana do miejsca, w którym zdefiniowana jest aplikacja. Ale to wszystko nie jest związane z pytaniem.