html - 使用 Angular2 以编程方式创建 Html 局部变量

Question

我需要知道是否有办法以编程方式创建 HTML 局部变量。

我正在开发一个网络应用程序，其中有一个 NgFor 循环，我希望能够为 NgFor 创建的每个子元素分配一个局部变量。

即:

<div *ngFor="#elt of eltList" >
    <span #setLocalVariable(elt.title)></span>
</div>

setLocalVariable(_title : string){
    let var = do some stuff to _title;
    return var;
}

上面的例子向您展示了我正在努力完成的事情，但显然行不通。 有没有办法做到这一点？

提前谢谢你。

编辑:

在看到我得到的答案后(我感谢所有花时间阅读我的问题并尝试回答它的人)我将进一步解释为什么我想要那样做。

我将使用:DynamicComponentLoader 中的 loadIntoLocation()。 该函数的第三个参数是一个引用 anchor 的字符串(即:html 元素中的 #test)。这就是为什么我需要创建名称与我的 elt.title 相同的局部变量。

Answer 1

我认为局部变量(用 # 字符定义)不适用于您的用例。

事实上，当您在 HTML 元素上定义局部变量时，它对应于组件(如果有的话)。当元素上没有组件时，变量指的是元素本身。

为局部变量指定一个值允许您选择与当前元素关联的特定指令。例如:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

将在 name 变量中设置与当前关联的 ngForm 指令的实例。

因此局部变量不会以您想要的为目标，即设置为循环的当前元素创建的值。

如果你尝试这样做:

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

您将遇到以下错误:

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2 实际上在此处查找与提供的名称 elt.title 匹配的指令)...请参阅此 plunkr 以重现错误:https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

请参阅此链接:http://victorsavkin.com/post/119943127151/angular-2-template-syntax ，“局部变量”部分了解更多详细信息。

除了迭代的当前元素，ngForm只提供了一组可以别名为局部变量的导出值:index、last、偶数 和奇数。

请参阅此链接:https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

---

您可以做的是创建一个子组件来显示循环中的元素。它将接受当前元素作为参数并创建您的“局部变量”作为组件的属性。然后您将能够在组件的模板中使用此属性，以便在循环中为每个元素创建一次。这是一个示例:

@Component({
  selector: 'elt',
  template: `
    <div>{{attr}}</div>
  `
})
export class ElementComponent {
  @Input() element;

  constructor() {
    // Your old "localVariable"
    this.attr = createAttribute(element.title);
  }

  createAttribute(_title:string) {
    // Do some processing
    return somethingFromTitle;
  }
}

以及使用方法:

<div *ngFor="#elt of eltList" >
  <elt [element]="elt"></elt>
</div>

---

编辑

在您发表评论后，我认为您尝试了此答案中描述的方法。以下是更多详细信息:create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2 .

希望对你有帮助， 蒂埃里