एंगुलर 2

Question

के साथ असीमित ए-फ्रेम घटकों का उपयोग करें Angular-CLI पर लाइब्रेरी चलाने का कोई तरीका है जिसमें टाइपिंग नहीं है?

मेरे मामले में, मैं aframe-template-component उपयोग करने के लिए k-frame स्थापित करने के लिए कोशिश कर रहा हूँ और documentation के माध्यम से, मैं समझता हूँ मैं टाइपप्रति के साथ उपयोग करने के लिए एक typings.d.ts फ़ाइल बनाने के लिए किया है। this प्रश्न के अनुसार, मैंने विभिन्न विकल्पों का प्रयास किया है लेकिन मैं फ़ाइल को उत्पन्न करने में सक्षम नहीं हूं या सीधे परियोजना के अंदर आयात नहीं कर पा रहा हूं।

मैं चलाने के लिए और dts-gen स्थापित करने के लिए भी कोशिश की है, लेकिन मैं निम्नलिखित त्रुटि हो रही है:

Component attempted to register before AFRAME was available

जिसका मतलब है मैं पहली बार एक फ्रेम रजिस्टर करने के लिए है। चूंकि मैं थोड़ी देर से फंस गया हूं, क्या आपको इस मुद्दे पर हल करने का विचार है? आपके उत्तरों के लिए अग्रिम धन्यवाद!

Answer 1

फिलहाल यह एक आसान काम नहीं है।

मैंने AngularCli के साथ इसे आजमाया है। मैं ng new का उपयोग कर एक नई परियोजना बनाया है और मैं इस चरणों का पालन करें:

1. ng new kframetest

2. स्थापित aframe और aframe-template-component का उपयोग कर: दोनों (zone.js के कारण

   npm install aframe aframe-template-component --save 
   

3. और ए-फ्रेम) पकड़ attributeChangedCallback आपको zone.js. से पहले ए-फ्रेम लोड करने की आवश्यकता है। तब (polyfills.ts फ़ाइल में) मैं जोड़ लिया है:

   import 'aframe'; 
   import 'aframe-template-component'; 
   

   बस import 'zone.js/dist/zone';

4. के पहले kframe sample टेम्पलेट के रूप में उपयोग करते हुए सरल घटक बनाएँ।

5. कोणीय करने के क्रम <a-entity> की तरह विशेष html टैग पार्स कर सकते हैं में आप schemas संपत्ति का उपयोग कर NgModule करने के लिए एक CUSTOM_ELEMENTS_SCHEMA और NO_ERRORS_SCHEMA जोड़ने के लिए:

   schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA] 
   

6. आवेदन चलाएँ।

अब आप कंसोल, एक फ्रेम की दौड़ में शामिल, देख सकते हैं:

Put the A-Frame script tag in the head of the HTML before the scene to ensure everything for A-Frame is properly registered before they are used from HTML.

aframe-master.js:75646 A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #bf8b8f9) 
aframe-master.js:75647 three Version: ^0.83.0 
aframe-master.js:75648 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b 

लेकिन बड़ी समस्या यह है कि कोणीय tryes एचटीएमएल पार्स करने के लिए है और वह aframe टेम्पलेट वाक्य रचना समझ में नहीं आता है आप इस त्रुटियों मिलती है:

Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token # at column 6 in [src: #boxesTemplate] in KFrameTestComponent

</a-assets> 
<a-entity [ERROR ->]template="src: #boxesTemplate" 
      data-box1color="red" data-box2color="green" data-box3color"): KFrameTestComponent@10:12 

Property binding src not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the @NgModule.declarations .

</a-assets> 

मैं के बारे में खोज की है बिना कोणीय पार्स के एचटीएमएल जोड़ें लेकिन मुझे नहीं मिला ...

मैंने टेम्पलेट को इंडेक्स एचटीएमएल में जोड़ने की कोशिश की है और ऐसा लगता है कि यह काम करता है लेकिन मैं समझता हूं कि आपकी वांछित स्थिति नहीं है।

आप यहाँ से कोड प्राप्त कर सकते हैं: https://gitlab.com/jros/angularcli-kframe