दिलचस्प पोस्ट
क्या मैं किसी विधि में कोड का निरीक्षण करने के लिए प्रतिबिंब का उपयोग कर सकता हूं? iPhone: मैं UIImageWriteToSavedPhotosAlbum () के साथ सहेजी गई छवि के फ़ाइल पथ को कैसे प्राप्त करूं? सामग्री में कैरेट (कर्सर) स्थिति प्राप्त करें HTML सामग्री युक्त संपादन योग्य क्षेत्र वसंत MVC प्रकार रूपांतरण: PropertyEditor या कनवर्टर? RStudio में आर के स्थान को कैसे बदल सकता है? चर के साथ awk का उपयोग करना मैं location.search से विशिष्ट पैरामीटर कैसे प्राप्त करूं? पायथन कक्षा में तरीकों की सूची कैसे प्राप्त करूं? पंजीकरण के बाद स्वचालित उपयोगकर्ता पंजीकरण YouTube लाइव प्रसारण के दौरान 'चैट' बॉक्स के माध्यम से दर्ज की गई टिप्पणियों की फ़ीड कैसे प्राप्त करें? Windows में C ++ के साथ विंडो के स्क्रीनशॉट लेने का सबसे अच्छा तरीका क्या है? 64 बिट विंडो पर पायथन 32-बिट स्मृति सीमाएं चेकबॉक्स अनचेक होने पर मैं सबमिट बटन कैसे अक्षम कर सकता हूं? JSON में स्ट्रिंग्स से बचने के लिए मुझे क्या करना चाहिए? Android संपादनटैच हटाएं (बैकस्पेस) कुंजी ईवेंट

एंगल 2 में डायनामिक टेम्पलेट URL

मैं पिछले कुछ दिनों से @View 2 के साथ खेल रहा हूं और आश्चर्यचकित @View कि @View डेकोरेटर के लिए एक गतिशील templateUrl @View प्रदान करना संभव है।

मैंने इसे एक फ़ंक्शन पास करने और एक स्ट्रिंग फ़ॉर्म को वापस करने का प्रयास किया है, लेकिन पूरे फ़ंक्शन सिर्फ एक स्ट्रिंग में बदल गया है।

मैंने वाकई पहले का कोणीय का उपयोग नहीं किया है। पहले तो मुझे नहीं पता कि क्या मैं गलत तरीके से इस बारे में जा रहा हूं, लेकिन क्या यह संभव है, या क्या गतिशील दृश्य बनाने का एक बेहतर तरीका है?

उदाहरण के लिए, मैं एक प्रपत्र प्रदर्शित करना चाहूंगा अगर उपयोगकर्ता लॉग इन नहीं है, लेकिन एक लॉग संदेश प्रदर्शित करते हैं तो वह एक पाठ संदेश प्रदर्शित करता है।

ऐसा कुछ काम नहीं करता है:

 @Component({ selector: 'my-component' }) @View({ // This doesn't work templateUrl: function() { return this.isLoggedIn ? 'logged-in.html' : 'logged-out.html'; } }) class MyComponent { constructor() { this.loggedIn = false; } } 

किसी भी सहायता की सराहना की जाएगी।

वेब के समाधान से एकत्रित समाधान "एंगल 2 में डायनामिक टेम्पलेट URL"

यद्यपि संभवत: सबसे सुरुचिपूर्ण समाधान नहीं है, मैंने एक घटक के लिए टेम्पलेट मान गतिशील रूप से असाइन करने के लिए DynamicComponentLoader और ElementRef का उपयोग किया है। वास्तव में, मैं एक समाधान की तलाश कर रहा था जहां मैं प्लेसहोल्डर में एक से अधिक कस्टम घटकों को जोड़ सकता हूं।

मैंने फ़ंक्शन में सेवा इंजेक्शन की कोशिश की, जैसा कि shmck द्वारा उल्लिखित किया गया था क्योंकि यह काम नहीं करता क्योंकि सेवाओं को अभी तक उपलब्ध नहीं है जब टेम्पलेट फ़ंक्शन को कॉल किया जाता है। वास्तव में, this विंडो ऑब्जेक्ट को संदर्भित करता है।

मेरे द्वारा उपयोग किए गए समाधान के लिए संदर्भ यूआरएल पाया जायेगा: डायनेमिक एंकर बनाएं / घटक घटक के साथ ComponentResolver और ngFor Angular2 में

मैं यह भी Plnkr1 और Plnkr2 को इस तरह से देखें

साइट डार्टडॉक्स कोकोशीर 2 डायनेमिक कम्पेनेंट लोडर वर्ग पर अच्छा दस्तावेज प्रदान करता है, जो टाइपस्क्रिप्ट के लिए भी लागू होता है।

संक्षेप में:

टेम्पलेट का उपयोग करने के लिए एक सरल घटक

 @Component({ selector: 'dt2-simple-block', properties: ["idx"], template: `<h1>Simple block for {{ idx }} </h1>`, directives: [] }) class dt2SimpleBlock { constructor() { } } 

घटक जो कि सभी घटक शामिल किए गए हैं के निर्माता (मेरे ऐप को कई बच्चे शामिल करने की आवश्यकता है:

  constructor(loader: DynamicComponentLoader, elementRef: ElementRef) { //iterate for (var i = 0; i < toSomething; i++) { // build the template var blockdirective = 'dt2-simple-block' var template = '<' + blockdirective + ' idx="' + this.userBlocks.userHomePanelBlocks[i] + '"></' + blockdirective + '>'; console.log(template); // debugging purpose var directives = [dt2SimpleBlock]; loader.loadNextToLocation(toComponent(template, directives), elementRef); } 

और सहायक फ़ंक्शन को कहीं प्रयोग के रूप में रखा जाना है

 function toComponent(template, directives = []) { @Component({ selector: 'fake-component' }) @View({ template, directives }) class FakeComponent { } return FakeComponent; } 

मेरा समाधान:

कोणीय 2.0 व्यू रीसोल्वर क्लास

 class myViewResolver extends ViewResolver{ resolve(component: Type): ViewMetadata { var view = super.resolve(component); // TODO: Write logic here:-) view.templateUrl = 'app/app.html'; return view; } } bootstrap(App,[ provide(ViewResolver , {useClass:myViewResolver}) ]); 

मेरा समाधान: (इस बारे में सौंदर्य html और सीएसएस फ़ाइलों के लिए आलसी लोड हो रहा है।)

यह home.componenet.ts है

 import { Component } from '@angular/core'; import { DynamicHTMLOutlet } from './../../directives/dynamic-html-outlet/dynamicHtmlOutlet.directive'; import { TranslateService, LangChangeEvent } from 'ng2-translate/ng2-translate'; @Component({ selector: 'lib-home', templateUrl: './app/content/home/home.component.html', directives: [DynamicHTMLOutlet] }) export class HomeComponent { html_template = `./app/content/home/home_`; html: string; css: string; constructor(translate: TranslateService) { this.html = this.html_template + translate.currentLang; this.css = './app/content/home/home.component.css'; translate.onLangChange.subscribe((event: LangChangeEvent) => { this.html = this.html_template + translate.currentLang; this.css = './app/content/home/home.component.css'; }); } } 

निदेशालय मैंने इस्तेमाल किया और कुछ बदलाव किए: यह home.componenet.html में है

 <dynamic-html-outlet [htmlPath]="html" [cssPath]="css"></dynamic-html-outlet> 

गतिशील घटकों के लिए यह निर्देश है:

 import { Component, Directive, ComponentFactory, ComponentMetadata, ComponentResolver, Input, ReflectiveInjector, ViewContainerRef, } from '@angular/core'; import { TranslatePipe } from 'ng2-translate/ng2-translate'; declare var $:any; export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> { const cmpClass = class DynamicComponent {}; const decoratedCmp = Component(metadata)(cmpClass); return resolver.resolveComponent(decoratedCmp); } @Directive({ selector: 'dynamic-html-outlet', }) export class DynamicHTMLOutlet { @Input() htmlPath: string; @Input() cssPath: string; constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) { } ngOnChanges() { if (!this.htmlPath) return; $('dynamic-html') && $('dynamic-html').remove(); const metadata = new ComponentMetadata({ selector: 'dynamic-html', templateUrl: this.htmlPath +'.html', styleUrls: [this.cssPath], pipes: [TranslatePipe] }); createComponentFactory(this.resolver, metadata) .then(factory => { const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); this.vcRef.createComponent(factory, 0, injector, []); }); } } 

आपके लिए जो कुछ भी कहा है, वह काफी नहीं है, लेकिन यह उल्लेख के लायक है:

एक और सरल समाधान, जो सबसे अधिक उपयोग मामलों के लिए काम करता है, तर्क को टेम्प्लेट में ही रखना है, जैसे:

 @Component({ selector: 'my-component' }) @View({ // Note1: Here, I use template instead of templateUrl. // Note2: I use ES6 string interpolation + require() to embed/load the other templates, but you can do it however you like. template: ` <div [ngSwitch]="loggedIn"> <template [ngSwitchCase]="true"> ${require('./logged-in.html')} </template> <template ngSwitchDefault> ${require('./logged-out.html')} </template> </div>` }) class MyComponent { constructor() { this.loggedIn = false; } } 

इस समाधान के लिए नकारात्मक पक्ष यह है कि आपकी सेवा जेएस फ़ाइल में दोनों टेम्पलेट्स को समाप्त होता है, इसलिए यह बड़ा टेम्प्लेट के लिए एक समस्या हो सकता है (लेकिन केवल एक टेम्पलेट वास्तव में प्रदान किया गया है और जेएस आकार ओवरहेड कई मामलों में स्वीकार्य है)।

एयल वर्दी के उत्तर पर अपडेट करें ( ViewResolver का बहिष्कार):

 import { Directive, Type, Component } from '@angular/core'; import { DirectiveResolver } from '@angular/compiler'; class myViewUrlResolver extends DirectiveResolver { resolve(type: Type<any>, throwIfNotFound?: boolean): Directive { let view = <any>super.resolve(type, throwIfNotFound); if (typeof view["templateUrl"] !== "undefined") { console.log("Yay!"); let originalUrl = (<Component>view).templateUrl; (<Component> view).templateUrl = environment.nativeScriptAppPrePathPrefix + originalUrl.replace(".html", ".tns.html"); } if (typeof view["styleUrls"] !== "undefined") { console.log("Yay2!"); let originalUrls = (<Component>view).styleUrls; originalUrls.forEach((originalUrl, at) => (<Component>view).styleUrls[at] = environment.nativeScriptAppPrePathPrefix + originalUrl.replace(".html", ".tns.css")); } return view; } } platformNativeScriptDynamic().bootstrapModule(AppModule,{ providers: [ { provide: DirectiveResolver, useClass: myViewUrlResolver } ] }); 

ऐसा लगता है कि गतिशील टेम्पलेट बनाने का यह तरीका सुरक्षा मामलों के कारण कांगारु 2 के लिए उपलब्ध नहीं होगा। दुर्भाग्यपूर्ण है, कांगरा 1 से मेरे पिछले आवेदन गतिशील रूप से इस तरह प्रेरित किया गया था।

कोणीय 2 के लिए – यह वही करने का एक अलग तरीका हो सकता है (नीचे दी गई लिंक का उदाहरण) टेम्पलेट एचटीएमएल फाइलों को एप्लिकेशन में घटकों के रूप में अपडेट करके, फिर उन (जिस स्थान पर आप स्ट्रिंग आदि स्ट्रिंग के साथ टेम्पलेट यूआरएल बनाने की कोशिश कर रहे थे) इंजेक्शन लगाने के तत्वों के रूप में घटक टेम्पलेट पैरामीटर को देखें (DynamicComponentLoader का उपयोग करके)।

https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-class.html

आशा है, आप के लिए गिथूब का उदाहरण आपकी मदद करेगा! डायनामिक html को संकलित करने के लिए उदाहरण हैं। इसलिए, आप अपनी किसी भी सेवा द्वारा HTML लोड कर सकते हैं और फिर इसे संकलित कर सकते हैं।

1- इस पुस्तकालय को स्थापित करें

एनपीएम आई-डी एचटीएमएल-लोडर

================================================== ==========

2- वेबपैक.कॉन्ग में एचटीएमएल फाइलों के लिए एचटीएमएल-लोडर का उपयोग करें

  { test: /\.html$/, loaders: ['html-loader'] } 

================================================== ==========

3- यदि आप ईओनिक का उपयोग करते हैं, तो आप "node_modules/@ionic/app-scripts/config/webpack.config.js" से वेबपैक.कॉन्फि.ज.स को कॉपी कर सकते हैं, उसके बाद एचटीएमएल लोडर को इसमें जोड़ें

================================================== ===========

4-यदि आप ईओनिक का उपयोग करते हैं तो पैकेज में। जेसन इन लाइनों को जोड़ते हैं

 "config": { "ionic_bundler": "webpack", "ionic_webpack": "webpack.config.ionic.js" }, 

================================================== ===========

5- फिर आप इसे नीचे के रूप में उपयोग कर सकते हैं

 @Component({ selector: 'page-login', // templateUrl:"./login.html" template: function(){ if(globalVariables.test==2) { return require("./login2.html") } else { return require("./login.html") } }(), }) 

======================================

6-यदि असफल त्रुटि के साथ फ़ंक्शन की आवश्यकता होती है तो आप इसे declarations.d.ts फ़ाइल में नीचे के रूप में रख सकते हैं:

declare var की आवश्यकता है: कोई भी;

एओटी "एनजी सेवा – एओटी" के साथ अपने आवेदन को संकलित करें

 export let DEFAULT_PREFIX :string= './app.component'; //or localStorage.getItem('theme') export function getMySuperTemplate(template: string) { return DEFAULT_PREFIX + template + '.html'; } @Component({ selector: 'app-root', templateUrl: getMySuperTemplate('2'), styleUrls:['./app.component.css'] })