Question

我正在尝试动态创建一些角度。静态创作的作品。例如。

<div>
    <popover-content #pop1
                     title="Hello"
                     placement="right"
                     [closeOnClickOutside]="true">
            Popup One
    </popover-content>

    <popover-content #pop2
                     title="Hello"
                     placement="right"
                     [closeOnClickOutside]="true">
            Popup Two
    </popover-content>

    Testing this <span [popover]="pop1" [popoverOnHover]="true">Pop1</span>.
    Testing this <span [popover]="pop2" [popoverOnHover]="true">Pop2</span>.
</div>

现在，我想从我的数据动态创建这些。但是它没有使用＃pop1 /＃pop2这个东西。

非工作代码：

<div>
        <popover-content *ngFor="let p of allPops; let index = index"
                         #pop{{index}}
                         title="Hello"
                         placement="right"
                         [closeOnClickOutside]="true">
                {{p.message}}
        </popover-content>

        Testing this <span [popover]="pop1" [popoverOnHover]="true">Pop1</span>.
        Testing this <span [popover]="pop2" [popoverOnHover]="true">Pop2</span>.
    </div>

所以，这#pop{{index}}不起作用。我还尝试使用以下样式[attr.id]="'#pop' + index"。也不行。那么自定义标签里面的＃＃有什么特别之处呢？如何动态创建它并使其工作？

Answer 1

遗憾的是，这不可能，更多关于这个问题：

https://github.com/angular/angular/issues/4581

抱歉，锚点必须是静态可分析的，因此无法动态生成。与您无法在编程语言中动态创建局部变量的方式相同。

本地参考不适合这样的事情，恐怕......

Btw本地模板引用与id属性不同。您尝试的内容仅适用于分配id属性，前缀为#。

https://angular.io/guide/template-syntax#ref-vars

如何动态创建角度<popover-content>？

1 个答案: