사용자가 선택한 구성 요소를 포함하는 동적 탭

angular angular-template


구성 요소가 제목을 사용하여 자신을 등록 할 수있는 탭 시스템을 설정하려고합니다. 첫 번째 탭은받은 편지함과 유사하며 사용자를 위해 선택할 수있는 다양한 작업 / 링크 항목이 있으며 이러한 각 클릭은 클릭시 새 구성 요소를 인스턴스화 할 수 있어야합니다. 작업 / 링크는 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);
    }
}

Questions:

  1. 받은 편지함에 새 (다른) 탭을 만드는 동적 목록을 만들려면 어떻게해야합니까? DynamicComponentBuilder 가 사용될 것이라고 추측하고 있습니까?
  2. 받은 편지함에서 구성 요소를 작성 (클릭시)하면 어떻게 탭으로 등록되고 표시됩니까? ng-content 추측 하고 있지만 사용법에 대한 많은 정보를 찾을 수 없습니다

편집 : 명확히하려고합니다.

받은 편지함을 메일받은 편지함이라고 생각하십시오. 항목은 JSON으로 가져오고 여러 항목을 표시합니다. 항목 중 하나를 클릭하면 해당 항목 조치 'type'을 사용하여 새 탭이 작성됩니다. 그런 다음 유형이 구성 요소입니다.

편집 2 : 이미지 .




Answer 1 Günter Zöchbauer


update

Angular 5 StackBlitz 예제

update

ngComponentOutlet 이 4.0.0- beta.3 에 추가되었습니다

update

비슷한 https://github.com/angular/angular/pull/11235 를 수행 하는 NgComponentOutlet 작업이 진행 중입니다.

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 DYNAMIC COMPONENT 로더

이전 버전 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

이것은 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

original

귀하의 질문에서 귀하의 요구 사항이 무엇인지 확실하지는 않지만 이것이 원하는 것을해야한다고 생각합니다.

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 예제 베타 15 ( Punker 기반이 아님)

동적으로 생성 된 구성 요소에 전달할 수있는 데이터를 전달하는 방법도 있습니다 ( someDatatype 과 같이 전달해야 함 )

    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을 참조 하십시오.




Answer 2 davimusprime


나는 의견이 충분하지 않다. 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




Answer 3 neuronet


Compiler 를 사용 하여 구성 요소를 단계 컨테이너에 주입하고 모든 것을 함께 연결하기위한 서비스를 제공하는 구성 요소 를 사용할 준비가되었습니다 (rc5 호환) ng2 단계 (데이터 동기화)

    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);
    });
  }

}