create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2

前端未结

关注

 2  621

心在旅途 2020-12-06 12:37

I need to create unique Anchor Names/Components in a ngFor loop to use it with ComponentResolver.resolveComponent.


  
        
          2条回答        

        
                    
            
            
                         
                
              
              
                
                   抹茶落季
                                             
                
                
                (楼主)
            
              
              
                2020-12-06 13:00
              

            
            
                        
Sorry, there's been a misunderstanding.

import {
  Directive, 
  Component, 
  View, 
  CORE_DIRECTIVES, 
  ElementRef, 
  DynamicComponentLoader,
  Input,
  QueryList,
  ViewChildren
} from 'angular2/angular2'

@Component({
  selector: 'my-cmp'
})
@View({
  template: 'my component'
})
class MyCmp {}

@Directive({
  selector: '[location]'
})
class Location {
  @Input() h: number;
  @Input() v: number;
  constructor(public elementRef: ElementRef) {
  }
}

@Component({
  selector: 'my-table'
})
@View({
  template: `
  

    

        
      
      
      

    
      
        {{v}}-{{h}}
      
    
  

  h:

  v:

  
  `,
  directives: [CORE_DIRECTIVES, Location]
})
class MyTable {
  vArr = [1, 2, 3];
  hArr = [1, 2, 3];
  @ViewChildren(Location) locations: QueryList;
  constructor(
    private loader: DynamicComponentLoader,
    ) {
  }

  load(h, v) {
    let elementRef = null;
    for(let i = 0; i < this.locations._results.length; i++) {
       if(this.locations._results[i].h == h && this.locations._results[i].v ==v) {
         elementRef = this.locations._results[i].elementRef;
       }
    }

    if(elementRef) {
      this.loader.loadNextToLocation(MyCmp, elementRef);
    }
  }
}

@Component({
  selector: 'my-app'
})
@View({
  template: ``,
  directives: [MyTable]
})
export class App {}



http://plnkr.co/edit/dqfPCW3MBa9hM23EW3cS?p=preview
Is that what you need?