与Angular2创建HTML局部变量编程 [英] Create Html local variable programmatically with Angular2

问题描述

我需要知道，如果有以编程方式创建HTML局部变量的方法。

I need to know if there is a way to create HTML local variables programmatically.

我开发一个web应用程序在那里我有一个NgFor循环，我希望能够给本地变量分配给由NgFor创建的每个子元素。

I am developing a web app where I have an NgFor loop and I want to be able to assign a local variable to each sub element created by the NgFor.

例如：

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

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

上面的为例向您展示了什么，我试图完成，显然是行不通的。
有没有办法来实现这一目标？

The exemple above shows you what I am trying to accomplish and obviously does not work. Is there a way to achieve this ?

感谢您提前。

编辑：

看到我得到的答案（我感谢大家谁花时间来阅读我的问题，并试图回答这个问题）我会解释一点，为什么我想用那种方式了。

After seeing the answers I got (and i thank everyone who took the time to read my question and tried to answer it) i'll explain a bit more why i want it that way.

我将使用： loadIntoLocation（）从 DynamicComponentLoader 。
这一功能得到了作为第三个参数，它指的是一个锚的字符串（例如：＃TEST 在一个HTML元素）。这就是为什么我需要用等于一个我 elt.title 。

I will be using : loadIntoLocation() from the DynamicComponentLoader. That function got as a 3rd parameter a string that refers to an anchors (ie : #test in an html element). Thats why i need to create those local variables with a name equal to the one of my elt.title.

推荐答案

我觉得局部变量（与＃字符定义）并不适用于您的使用情况。

I think local variables (defined with the # character) don't apply for your use case.

在事实上，当你HTML元素上定义本地变量它对应如果任何组件。当在元件上没有部件，变量指的是元件本身

In fact, when you define a local variable on an HTML element it corresponds to the component if any. When there is no component on the element, the variable refers to the element itself.

为局部变量指定的值，您可以选择与当前元素相关联的特定指令。例如：

Specifying a value for a local variable allows you to select a specific directive associated with the current element. For example:

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

将设置与目前在名称变量相关的 ngForm 指令的实例。

will set the instance of the ngForm directive associated with the current in the name variable.

所以，局部变量不针对你想要什么，即设定一个循环的当前元素创造了价值。

So local variables don't target what you want, i.e. setting a value created for the current element of a loop.

如果你试图做这样的事情：

If you try to do something like that:

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

您都会有这样以下错误：

You will have this following error:

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=$p$pview

Angular2 actually looks for a directive matching the provided name elt.title here)... See this plunkr to reproduce the error: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

请参阅此链接： http://victorsavkin.com/post/119943127151/角2模板语法，部分局部变量的更多细节。

See this link: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, section "Local variables" for more details.

除了迭代的当前元素， ngForm 只提供了一组可以别名局部变量出口值：指数，末页，甚至和奇。

In addition to the current element of the iteration, ngForm only provides a set of exported values that can be aliased to local variables: index, last, even and odd.

请参阅此链接： https://angular.io/文档/ TS /最新/ API /普通/ NgFor-directive.html

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

What you could do is to create a sub component to display elements in the loop. It will accept the current element as parameter and create your "local variable" as attribute of the component. You will be able then to use this attribute in the template of the component so it will be created once per element in the loop. Here is a sample:

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

---

修改

您的评论之后，我认为，你尝试在这个答案所描述的方法。以下是详细信息：<一href=\"http://stackoverflow.com/questions/32977271/create-dynamic-anchorname-for-dynamiccomponentloader-with-ng-for-in-angular2\">create动态anchorName为DynamicComponentLoader与NG-在Angular2 。

After your comment, I think that you try the approach described in this answer. Here are more details: create dynamic anchorName for DynamicComponentLoader with ng-for in Angular2.

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于与Angular2创建HTML局部变量编程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！