angular - ব্যবহারকারী-ক্লিক নির্বাচিত উপাদান সহ গতিশীল ট্যাব




angular-template (2)

আমি এমন একটি ট্যাব সিস্টেম সেটআপ করার চেষ্টা করছি যা উপাদানগুলি তাদের নিবন্ধিত করতে দেয় (একটি শিরোনাম সহ)। প্রথম ট্যাবটি একটি ইনবক্সের মতো, ব্যবহারকারীর জন্য বেছে নেওয়া প্রচুর পরিমাণে ক্রিয়া / লিঙ্ক আইটেম রয়েছে এবং এই ক্লিকগুলির প্রত্যেকটি ক্লিকটিতে একটি নতুন উপাদান ইনস্ট্যান্ট করতে সক্ষম হবে। ক্রিয়াগুলি / লিঙ্কগুলি JSON থেকে আসে।

ইনস্ট্যান্টিয়েটেড উপাদানটি নতুন ট্যাব হিসাবে নিজেকে নিবন্ধিত করবে।

আমি নিশ্চিত না এটি 'সেরা' পদ্ধতির কিনা? এখনও অবধি, আমি দেখেছি এমন একমাত্র গাইড হ'ল স্থির ট্যাবগুলির জন্য, যা কোনও সাহায্য করে না।

এখনও অবধি, আমি কেবলমাত্র ট্যাব পরিষেবা পেয়েছি যা অ্যাপ্লিকেশন জুড়ে চলার জন্য মূলত বুটস্ট্র্যাপযুক্ত is এটি দেখতে এমন কিছু দেখাচ্ছে:

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 অনুমান করছি, তবে কীভাবে এটি ব্যবহার করতে হয় সে সম্পর্কে আমি খুব বেশি তথ্য খুঁজে পাই না

সম্পাদনা: স্পষ্ট করার চেষ্টা

ইনবক্সটিকে একটি মেল ইনবক্স হিসাবে ভাবেন। আইটেমগুলি JSON হিসাবে আনা হয় এবং এটি বেশ কয়েকটি আইটেম প্রদর্শন করে। একবার আইটেমগুলির মধ্যে একটিতে ক্লিক করা হলে, আইটেমগুলির ক্রিয়া 'প্রকার' দিয়ে একটি নতুন ট্যাব তৈরি করা হয়। টাইপটি তখন একটি উপাদান।

সম্পাদনা 2: Image


(rc5 সামঞ্জস্যপূর্ণ) ng2-steps ব্যবহারের জন্য প্রস্তুত উপাদান রয়েছে যা 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);
    });
  }

}

আমি মন্তব্যের জন্য যথেষ্ট শীতল নই। আমি আরসি 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





angular-template