create dynamic anchorName/Komponenten mit ComponentResolver und ngFor in Angular2

Question

Ich brauche eindeutige Anker Namen/Komponenten in einer ngFor-Schleife, um es mit ComponentResolver.resolveComponent zu verwenden.

<div> 
    <table> 
    <tr *ng-for="#vIndex of vArr"> 
     <td *ng-for="#hIndex of hArr"> 
     <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div> 
     </td> 
    </tr> 
    </table> 
</div> 

sollte die resultierende html so ähnlich aussehen:

<div> 
    <table> 
    <tr> 
     <td> 
     <div #uniqueanchorname0_0></div> 
     </td> 
     <td> 
     <div #uniqueanchorname0_1></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div #uniqueanchorname1_0></div> 
     </td> 
     <td> 
     <div #uniqueanchorname1_1></div> 
     </td> 
     <td> 
     <div #uniqueanchorname1_2></div> 
     </td> 
    </tr> 
    </table> 
</div> 

, die mit i die DynamicComponentLoader wie verwenden:

loader.loadIntoLocation(responseDependentComponent, elementRef, 'uniqueAnchorName1_2'); 

die resultierende HTML ersetzt bekommen nicht und etwas aussehen wird wie:

<div> 
    <table> 
    <tr> 
     <td> 
     <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div> 
     </td> 
     <td> 
     <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div> 
     </td> 
     <td> 
     <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div> 
     </td> 
     <td> 
     <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div> 
     </td> 
    </tr> 
    </table> 
</div> 

Wenn die Erstellung von eindeutigen Ankernamen nicht möglich ist. Gibt es eine andere Möglichkeit, Komponenten an einem bestimmten Ort zu laden?

Answer 1

Entschuldigung, es gab ein Missverständnis.

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: ` 
    <table border> 
    <tr *ng-for="#v of vArr"> 
     <td *ng-for="#h of hArr"> 
     <div location v="{{v}}" h="{{h}}">{{v}}-{{h}}</div> 
     </td> 
    </tr> 
    </table> 
    h:<input #hi value="1"><br> 
    v:<input #vi value="2"><br> 
    <button (click)="load(hi.value, vi.value)">load</button> 
    `, 
    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: `<my-table></my-table>`, 
    directives: [MyTable] 
}) 
export class App {} 

http://plnkr.co/edit/dqfPCW3MBa9hM23EW3cS?p=preview Ist das, was Sie brauchen?

Answer 2

Lösung für Angular2 rc.0

HTML:

<div style="display: block"> 
    <table> 
    <tr *ngFor="let v of arr; let i = index"> 
     <td *ngFor="let h of arr[i]; let j = index"> 
     <div location v="i" h="j"></div> 
     </td> 
    </tr> 
    </table> 
</div> 

Ort Richtlinie:

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

    constructor(public viewContainerRef: ViewContainerRef) { 
    } 
} 

Komponente

@Component({ 
    selector: 'example-cmp', 
    directives: [CORE_DIRECTIVES, Location] 
}) 
export class ExampleComponent implements AfterViewInit { 
    public arr: Array<Array<number>> = []; 
    public componentRef: ComponentRef<any>; 

    @ViewChildren(Location) private locations: QueryList<Location>; 

    constructor(private resolver: ComponentResolver) { 
    } 

    ngAfterViewInit() { 
    this.loadTag(0,0,SomeViewComponent); 
    } 

    loadTag(x:number, y:number, component) { 
    let viewContainerRef: ViewContainerRef = null; 
    let locs = this.locations.toArray(); 
    for (let i = 0; i < locs.length; i++) { 
     if (+locs[i].h === x && +locs[i].v === y) { 
     viewContainerRef = locs[i].viewContainerRef; 
     } 
    } 
    if (viewContainerRef != null) { 
     var injector = ReflectiveInjector.fromResolvedProviders(ReflectiveInjector.resolve([ 
     provide(NeededAttribute, { useValue: 42 })]), 
     this.componentRef.injector); 

     this.resolver.resolveComponent(component).then((factory: ComponentFactory<any>) => { 
     var compRef: ComponentRef<any> = viewContainerRef.createComponent(factory, -1, injector); 
     }); 
    } 
    } 
}