कैसे टाइपप्रति

Question

में .html टुकड़ा ES6 सिंटैक्स का उपयोग आयात करने के लिए इस तरह एक रिश्तेदार पथ से एक HTML टेम्पलेट आयात करने के लिए कैसे:

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

टाइपप्रति संकलक शिकायत है कि यह मॉड्यूल नहीं मिल रहा। मैं एक परिवेश मॉड्यूल परिभाषा बनाने की कोशिश कर रहा था, लेकिन यह मॉड्यूल नामों में सापेक्ष पथ की अनुमति नहीं देता है। मैं SystemJS को मॉड्यूल लोडर के रूप में उपयोग कर रहा हूं।

Answer 1

यह असंभव है।

टाइपस्क्रिप्ट में module की परिभाषा के कारण, और जहां तक ​​मैं ES6 जावास्क्रिप्ट (import) में जानता हूं। मॉड्यूल एचटीएमएल नहीं हो सकता है। सामान्य दृष्टिकोण एक जावास्क्रिप्ट मॉड्यूल आयात करना है जो एचटीएमएल, सीएसएस, जो कुछ भी एक स्ट्रिंग निर्यात करता है। लेकिन वह कच्चे एचटीएमएल के साथ फाइल का आयात नहीं कर रहा है।

शायद आप html imports पर भी एक नज़र रखना चाहते हैं, लेकिन यह पूरी तरह से अलग बात है।

Answer 2

मैं SystemJS के बारे में पता नहीं है, लेकिन यह निश्चित रूप से Webpack के साथ संभव है और html-loader

Answer 3

आप वाक्य रचना

1 की आवश्यकता का प्रयोग करके) app.d.ts फ़ाइल बनाएँ आयात और परिभाषा इतनी आवश्यकता हो सकती है टाइपस्क्रिप्ट जानते हैं कि यह कार्य है। (आप डॉन गया कोई भी इसके अलावा लाइब्रेरी को जोड़ना होगा, systemJs समर्थन की आवश्यकता वाक्य रचना)

declare function require(params:string): any; 

2) अब आप अपने एचटीएमएल वर टेम्पलेट का उपयोग कर आयात कर सकते हैं = की आवश्यकता होती है ('! ./ कस्टम select.html पाठ')

मैंने पाया इसे और भी बेहतर है क्योंकि आप उपयोग कर सकते हैं इनलाइन

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

Answer 4

मैं टाइपप्रति उपयोग नहीं करते समय की आवश्यकता होती है, लेकिन मैं ES6 उपयोग करते हैं। आपके लिए उपयोगी हो सकता है।

जिस तरह से मैं इसे हल करता हूं वह `उद्धरणों का उपयोग करके टेम्पलेट स्ट्रिंग घोषित कर रहा है। यह मेरे लिए ठीक काम करता है, मुझे यह जानकर खुशी होगी कि क्या कोई सोचता है कि यह एक बुरा खरगोश है।

कोणीय (-ui-राउटर) के साथ एक स्निपेट के नीचे।

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

पूर्णता के लिए, यह मान लिया गया है indexController कहीं परिभाषित किया गया है। साथ ही, यह कॉन्फ़िगरेशन फ़ंक्शन किसी ऐसे स्थान पर निर्यात किया जाता है जहां ऐप परिभाषित किया जाता है। लेकिन यह सब सवाल से संबंधित नहीं है।