angular - उपयोगकर्ता-क्लिक किए गए घटकों के साथ डायनामिक टैब




angular2-template angular-template (2)

मैं टिप्पणियों के लिए पर्याप्त शांत नहीं हूं। मैंने आरसी 2 के लिए काम करने के लिए स्वीकृत उत्तर से प्लंकर को ठीक किया। कुछ भी नहीं फैंसी, सीडीएन के लिंक बस टूट गए थे।

'@angular/core': {
  main: 'bundles/core.umd.js',
  defaultExtension: 'js'
},
'@angular/compiler': {
  main: 'bundles/compiler.umd.js',
  defaultExtension: 'js'
},
'@angular/common': {
  main: 'bundles/common.umd.js',
  defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
  main: 'bundles/platform-browser-dynamic.umd.js',
  defaultExtension: 'js'
},
'@angular/platform-browser': {
  main: 'bundles/platform-browser.umd.js',
  defaultExtension: 'js'
},

https://plnkr.co/edit/kVJvI1vkzrLZJeRFsZuv?p=preview

मैं एक टैब सिस्टम को सेटअप करने की कोशिश कर रहा हूं जो घटकों को खुद को पंजीकृत करने की अनुमति देता है (एक शीर्षक के साथ)। पहला टैब एक इनबॉक्स की तरह है, इसमें उपयोगकर्ताओं के लिए चुनने के लिए बहुत सारे कार्य / लिंक आइटम हैं, और इनमें से प्रत्येक क्लिक पर एक नए घटक को तत्काल करने में सक्षम होना चाहिए। क्रियाएँ / लिंक JSON से आती हैं।

तात्कालिक घटक तब एक नए टैब के रूप में खुद को पंजीकृत करेगा।

मुझे यकीन नहीं है कि क्या यह 'सर्वश्रेष्ठ' दृष्टिकोण है? अब तक, मैंने जो एकमात्र गाइड देखा है, वह स्टैटिक टैब के लिए है, जो मदद नहीं करता है।

अब तक, मुझे केवल टैब सेवा मिली है, जो मुख्य रूप से पूरे ऐप में बने रहने के लिए बूटस्ट्रैप्ड है। यह कुछ इस तरह दिखता है:

export interface ITab { title: string; }

@Injectable()
export class TabsService {
    private tabs = new Set<ITab>();

    addTab(title: string): ITab {
        let tab: ITab = { title };
        this.tabs.add(tab);
        return tab;
    }

    removeTab(tab: ITab) {
        this.tabs.delete(tab);
    }
}

प्रशन:

  1. मैं इनबॉक्स में एक गतिशील सूची कैसे बना सकता हूं जो नए (अलग) टैब बनाता है? मैं यह अनुमान लगाने की तरह हूं कि DynamicComponentBuilder का उपयोग कैसे किया जाएगा?
  2. इनबॉक्स से घटक कैसे बनाए जा सकते हैं (क्लिक करने पर) खुद को टैब के रूप में पंजीकृत करते हैं और दिखाए भी जाते हैं? मैं ng-content अनुमान लगा रहा हूं, लेकिन मैं इसका उपयोग करने के तरीके के बारे में अधिक जानकारी नहीं पा सकता हूं

EDIT: स्पष्ट करने का प्रयास।

मेल इनबॉक्स के रूप में इनबॉक्स को सोचें। आइटम JSON के रूप में प्राप्त होते हैं और यह कई आइटम प्रदर्शित करता है। एक आइटम पर क्लिक करने के बाद, उस आइटम एक्शन 'टाइप' के साथ एक नया टैब बनाया जाता है। प्रकार तब एक घटक है।

संपादित करें 2: Image


वहाँ घटक (rc5 संगत) ng2-steps का उपयोग करने के लिए तैयार है जो Compiler का उपयोग करता है घटक को कदम कंटेनर और सेवा को एक साथ सब कुछ तारों के लिए इंजेक्ट करने के लिए (डेटा सिंक)

    import { Directive , Input, OnInit, Compiler , ViewContainerRef } from '@angular/core';

import { StepsService } from './ng2-steps';

@Directive({
  selector:'[ng2-step]'
})
export class StepDirective implements OnInit{

  @Input('content') content:any;
  @Input('index') index:string;
  public instance;

  constructor(
    private compiler:Compiler,
    private viewContainerRef:ViewContainerRef,
    private sds:StepsService
  ){}

  ngOnInit(){
    //Magic!
    this.compiler.compileComponentAsync(this.content).then((cmpFactory)=>{
      const injector = this.viewContainerRef.injector;
      this.viewContainerRef.createComponent(cmpFactory, 0,  injector);
    });
  }

}




angular-template