使用 Angular2 以编程方式创建 Html 局部变量答案

【问题标题】：Create Html local variable programmatically with Angular2使用 Angular2 以编程方式创建 Html 局部变量
【发布时间】：2023-04-04 06:08:02
【问题描述】：

我需要知道是否有办法以编程方式创建 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;
}

上面的示例向您展示了我想要完成的工作，但显然不起作用。有没有办法做到这一点？

提前谢谢你。

编辑：

在看到我得到的答案后（我感谢所有花时间阅读我的问题并试图回答它的人）我会解释一下我为什么要这样。

我将使用：loadIntoLocation()，来自DynamicComponentLoader。该函数的第三个参数是一个指向锚点的字符串（即：html 元素中的#test）。这就是为什么我需要创建那些名称等于我的elt.title 之一的局部变量。

【问题讨论】：

为什么它必须是一个局部变量？为什么不只是设置一个属性？无论如何elt.title 似乎是一个字符串。
它必须是一个局部变量，因为我将在 DynamicComponentLoader 的 loadIntoLocation() 函数中使用它，如果我正确理解该函数的第三个参数，它是一个指向锚点的字符串我的 HTML 元素的“#something”。
loadNextToLocation 只需要 ElementRef 如果这有帮助。我不知道是否真的可以创建这样的变量，我也很好奇是否可以。
我会尝试使用 loadNextToLocation 但我们会等着看我想要实现的目标是否可行。感谢您的帮助。

标签： html angular local-variables

【解决方案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、even 和 odd。

查看此链接：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。

希望对你有帮助蒂埃里

【讨论】：

感谢您花时间回答我的问题。但我从来没有说过我想为我的局部变量分配一些东西，比如“#localVariable="elt.tiltle"”，我需要做的是声明一个名称等于 elt.title 的局部变量。如果 elt.title = "test1" 我希望我的局部变量是 "#test1" 并且当然是指元素。请参阅我的编辑以了解为什么我需要它为什么我需要这样做。
好的，现在可以更好地了解您的尝试；-) 感谢您提供更多提示！
我为潜在的解决方案添加了答案。我仍在研究相应的 plunkr...
是的，我正在尝试做类似于您在答案中包含的链接的事情。感谢您指出这个 stackoverflow 问题。感谢您的帮助。

【解决方案2】：

您可以将其粘贴到模板插值中，因为它处理表达式。

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

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

【讨论】：