使用ComponentResolver和Angular2中的ngFor创建动态锚点名称/组件

Question

我需要在ngFor循环中创建唯一锚定名称/组件，以便将其与ComponentResolver.resolveComponent结合使用。

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

生成的HTML看起来应该是这样的：

<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> 

有了，我可以使用DynamicComponentLoader，如：

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

生成的HTML不会被取代，看起来会如：

<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> 

如果创建唯一的锚名称是不可能的。是否有其他方式将组件加载到特定位置？

Answer 1

对不起，有误会。

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 是你需要什么？

Answer 2

解决方案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> 

Location指令：

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

    constructor(public viewContainerRef: ViewContainerRef) { 
    } 
} 

组件

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