Угловые динамические вкладки с выбранными пользователем компонентами

Я пытаюсь настроить систему вкладок, которая позволяет компонентам регистрироваться самостоятельно (с заголовком). Первая вкладка похожа на папку "Входящие", в ней доступно множество действий / элементов ссылок для пользователей, и каждый из этих кликов должен иметь возможность создавать новый компонент по щелчку. Действия / ссылки поступают из JSON.

Созданный экземпляр затем зарегистрируется как новая вкладка.

Я не уверен, что это "лучший" подход? Софар единственные направляющие, которые я видел, для статических вкладок, которые не помогают.

Пока у меня есть только служба вкладок, которая загружается в main для сохранения в приложении, выглядит примерно так.

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 и отображают несколько элементов. После щелчка по одному из элементов создается новая вкладка с этим действием действия "тип". Тип тогда является компонентом

Edit2: изображение

https://i.imgur.com/yzfMOXJ.png

Источник

3 ответа

Решение

Обновить

Angular 5 StackBlitz пример

Обновить

ngComponentOutlet был добавлен в 4.0.0-бета.3

Обновить

E сть NgComponentOutlet работа в процессе, который делает что-то подобное https://github.com/angular/angular/pull/11235

RC.7

Пример плунжера RC.7

// Helper component to add dynamic components
@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;
  @Input() type: Type<Component>;
  cmpRef: ComponentRef<Component>;
  private isViewInitialized:boolean = false;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) {}

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      // when the `type` input changes we destroy a previously 
      // created component before creating the new one
      this.cmpRef.destroy();
    }

    let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
    this.cmpRef = this.target.createComponent(factory)
    // to access the created instance use
    // this.compRef.instance.someProperty = 'someValue';
    // this.compRef.instance.someOutput.subscribe(val => doSomething());
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

Пример использования

// Use dcl-wrapper component
@Component({
  selector: 'my-tabs',
  template: `
  <h2>Tabs</h2>
  <div *ngFor="let tab of tabs">
    <dcl-wrapper [type]="tab"></dcl-wrapper>
  </div>
`
})
export class Tabs {
  @Input() tabs;
}

@Component({
  selector: 'my-app',
  template: `
  <h2>Hello {{name}}</h2>
  <my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
  // The list of components to create tabs from
  types = [C3, C1, C2, C3, C3, C1, C1];
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, DclWrapper, Tabs, C1, C2, C3],
  entryComponents: [C1, C2, C3],
  bootstrap: [ App ]
})
export class AppModule {}

Смотрите также angular.io ДИНАМИЧЕСКИЙ КОМПОНЕНТНЫЙ ПОГРУЗЧИК

более старые версии xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Это снова изменилось в Angular2 RC.5

Я обновлю пример ниже, но это последний день перед отпуском.

Этот пример Plunker демонстрирует, как динамически создавать компоненты в RC.5.

Обновление - используйте ViewContainerRef.createComponent ()

Так как DynamicComponentLoader устарел, подход должен быть обновлен снова.

@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() type;
  cmpRef:ComponentRef;
  private isViewInitialized:boolean = false;

  constructor(private resolver: ComponentResolver) {}

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
   this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
      this.cmpRef = this.target.createComponent(factory)
      // to access the created instance use
      // this.compRef.instance.someProperty = 'someValue';
      // this.compRef.instance.someOutput.subscribe(val => doSomething());
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

Пример плунжера RC.4
Пример плунжера бета.17

Обновить - использовать loadNextToLocation

export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() type;
  cmpRef:ComponentRef;
  private isViewInitialized:boolean = false;

  constructor(private dcl:DynamicComponentLoader) {}

  updateComponent() {
    // should be executed every time `type` changes but not before `ngAfterViewInit()` was called 
    // to have `target` initialized
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
    this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

Пример плунжера бета.17

оригинал

Не совсем уверен по вашему вопросу, каковы ваши требования, но я думаю, что это должно делать то, что вы хотите.

Tabs Компонент получает массив переданных типов и создает "вкладки" для каждого элемента в массиве.

@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  constructor(private elRef:ElementRef, private dcl:DynamicComponentLoader) {}
  @Input() type;

  ngOnChanges() {
    if(this.cmpRef) {
      this.cmpRef.dispose();
    }
    this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }
}

@Component({
  selector: 'c1',
  template: `<h2>c1</h2>`

})
export class C1 {
}

@Component({
  selector: 'c2',
  template: `<h2>c2</h2>`

})
export class C2 {
}

@Component({
  selector: 'c3',
  template: `<h2>c3</h2>`

})
export class C3 {
}

@Component({
  selector: 'my-tabs',
  directives: [DclWrapper],
  template: `
  <h2>Tabs</h2>
  <div *ngFor="let tab of tabs">
    <dcl-wrapper [type]="tab"></dcl-wrapper>
  </div>
`
})
export class Tabs {
  @Input() tabs;
}


@Component({
  selector: 'my-app',
  directives: [Tabs]
  template: `
  <h2>Hello {{name}}</h2>
  <my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
  types = [C3, C1, C2, C3, C3, C1, C1];
}

Пример плункера бета.15 (не на основе вашего плункера)

Существует также способ передачи данных, которые можно передать динамически созданному компоненту, например (someData нужно будет передать как type)

    this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
  cmpRef.instance.someProperty = someData;
  this.cmpRef = cmpRef;
});

Существует также некоторая поддержка использования внедрения зависимостей с общими службами.

Для получения дополнительной информации см. https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

Источник

Я недостаточно крут для комментариев. Я исправил поршень из принятого ответа, чтобы работать на RC2. Ничего особенного, ссылки на CDN просто сломаны - это все.

'@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

Источник

Есть готовый к использованию компонент (совместимый с 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);
    });
  }

}
Источник
Другие вопросы по тегам