在Angular2中使用ComponentResolver和ngFor创建动态anchorName /

发布时间：2020-12-17 07:28:32 所属栏目：安全来源：网络整理

导读：我需要在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

我需要在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>

如果无法创建唯一的锚名称.还有其他方法可以将组件加载到特定位置吗？

对不起,这是一个误解.

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,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这就是你需要的吗？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!