带有用户单击所选组件的动态选项卡


224

我正在尝试设置一个选项卡系统,允许组件注册自己(带有标题)。第一个选项卡就像一个收件箱,有很多操作/链接项可供用户选择,并且这些单击中的每一个都应能够在单击时实例化一个新组件。操作/链接来自JSON。

然后,实例化的组件将自己注册为新选项卡。

我不确定这是否是“最佳”方法?到目前为止,我所见的唯一指南仅针对静态标签,这无济于事。

到目前为止,我只获得了tabs服务,该服务已在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格式获取,并显示多个项目。单击其中一项后,将创建一个带有该项操作“类型”的新标签。然后,该类型就是一个组件。

编辑2: 图片


如果在构建时不知道选项卡中显示的组件,则DCL是正确的方法。
君特Zöchbauer

7
我不明白您的要求,所以很难在没有工作代码/插件的情况下告诉您任何信息。如果可以在某个地方帮助您,请看一下 plnkr.co/edit/Ud1x10xee7​​BmtUaSAA2R?p=preview(我不知道它是否相关)
micronyks

@micronyks我认为您的链接错误
Cuel

嗨!我正在尝试做你想要的。到目前为止,我设法用动态内容创建了选项卡,但是当更改选项卡时(加载的组件可能有很大的不同),我没有找到令人满意的方式来保持组件状态。您是如何管理的?
gipinani

Answers:


267

更新

Angular 5 StackBlitz示例

更新

ngComponentOutlet 被添加到4.0.0-beta.3

更新

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动态组件加载器

旧版本 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Angular2 RC.5中再次改变了这一点

我将更新以下示例,但这是放假前的最后一天。

柱塞示例演示了如何在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
柱塞示例beta.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();
    }    
  }
}

Plunker示例beta.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];
}

Plunker示例beta.15(不是基于您的Plunker)

还有一种传递数据的方法,该数据可以传递给动态创建的组件,例如(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


1
当然,您只需要获取组件类型即可DclWrapper创建实际实例。
君特Zöchbauer

1
@Joseph您可以注入ViewContainerRef而不是使用ViewChild,然后<dcl-wrapper>它本身成为目标。元素被添加为目标的同级,因此将不在<dcl-wrapper>此范围之内。
君特Zöchbauer

1
不支持更换。您可以更改模板''(空字符串)`和改变构造函数constructor(private target:ViewContainerRef) {},然后动态添加的组件成为兄弟姐妹<dcl-wrapper>
冈特Zöchbauer

1
我正在使用RC4,该示例非常有用。我只想提及的是我必须添加以下代码以使绑定正常工作。
拉吉

4
使用ngAfterViewInit时动态组件具有另一个dynaimc组件时出现错误。改为ngAfterContentInit,现在它正在处理嵌套的动态组件
Abris

20

我还没有发表评论的能力。我从公认的答案中修复了插件,以便为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


16

有准备使用的组件(与rc5兼容) ng2-step ,用于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);
    });
  }

}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.