创建DynamicComponentLoader动态anchorName与NG-在Angular2 [英] create dynamic anchorName for DynamicComponentLoader with ng-for in Angular2

问题描述

我需要建立在独特的锚名的NG-for循环与DynamicComponentLoader.loadIntoLocation使用它。

I need to create unique Anchor Names in a ng-for loop to use it with DynamicComponentLoader.loadIntoLocation.

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

生成的HTML应该是这个样子的：

the resulting html should look something like that:

<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这样的：

With that i can use the DynamicComponentLoader like:

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

生成的HTML不被替换，并会看起来像：

the resulting HTML does not get replaced and will look something like:

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

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

If the creation of unique anchor names is not possible. Is there an other way to load components into a specific location?

推荐答案

对不起，这里是一个误会。

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: `
  <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=$p$ PVIEW
这就是你需要什么？

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

这篇关于创建DynamicComponentLoader动态anchorName与NG-在Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！