角2动态卡口与用户单击选择组件 [英] Angular 2 dynamic tabs with user-click chosen components

问题描述

我想设置一个标签系统，该系统允许组件注册自己（有题）。第一个标签就像是一个收件箱中，有大量的动作/链接项目从用户选择，并且每个点击都应该能够实例化一个新的组件，在点击。动作/链接从JSON用武之地。

I'm trying to setup a tab system that allows for components to register themselves (with a title). The first tab is like an inbox, there's plenty of actions/link items to choose from for the users, and each of these clicks should be able to instantiate a new component, on click. The actions / links comes in from JSON.

该组件实例然后将自身注册为一个新的标签。

The instantiated component will then register itself as a new tab.

我不知道这是否是'最好'的方法？ SOFAR我见过的唯一指南是静态的标签，它并不能帮助。

I'm not sure if this is the 'best' approach? Sofar the only guides I've seen are for static tabs, which doesn't help.

到目前为止，我只带了这是在主自举整个应用程序坚持标签服务，看起来〜这样的事情。

So far I've only got the tabs service which is bootstrapped in main to persist throughout the app, looks ~something like this.

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会使用吗？

1) How can I have a dynamic list in the inbox that creates new (different) tabs? I am sort of guessing the DynamicComponentBuilder would be used?

2）如何从收件箱（上单击）注册自己的标签，也创建的组件显示？我猜NG-内容，但我无法找到如何使用它的很多信息

2) How can the components created from the inbox (on click) register themselves as tabs and also be shown? I'm guessing ng-content but I can't find much info on how to use it

编辑：试图澄清

收件箱作为邮件收件箱中认为，项目是牵强，因为JSON和显示几个项目。一旦一个项目被点击时，一个新的标签与该项目动作类型创建。类型是随后的成分

Think of the inbox as a mail inbox, items are fetched as JSON and displays several items. Once one of the items is clicked, a new tab is created with that items action 'type'. The type is then a component

EDIT2：图像

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

推荐答案

不是从你的问题完全确定你的需求是什么，但我认为这应该做你想要什么。

Not entirely sure from your question what your requirements are but I think this should do what you want.

的标签组件获得的传递类型数组并为阵列中的每个项目创造了标签。

The Tabs component gets an array of types passed and it creates "tabs" for each item in the array.

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

  ngOnChanges() {
    if(this.cmpRef) {
      throw 'currently changing type after the component was added is not supported'
    }
    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="#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];
}

Plunker例如（不是基于你的Plunker）

Plunker example (not based on your Plunker)

还有传递数据一起，可以通过像动态创建的组件的方式（ someData 需要像传递类型）

There is also a way to pass data along that can be passed to the dynamically created component like (someData would need to be passed like type)

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

也有一定的支持，以使用依赖注入与共享服务。

There is also some support to use dependency injection with shared services.

有关详细信息，请参见 https://angular.io/文档/ JS /最新/ API /核心/ DynamicComponentLoader-class.html

For more details see https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-class.html

这篇关于角2动态卡口与用户单击选择组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！