Javascript 如何设置动态；id"；角度组件的HTML属性？

我的问题与在同一页面上放置具有不同参数的相同组件有关。在本例中，它是一个包含来自第三方Javascript库（）的图表的组件，它需要一个HTML

id

属性来定位和修改组件的HTML内容

现在，这个

id

属性应该为页面上放置的每个图表包含一个唯一的字符串，如果我直接将其设置为父组件中的字符串，它就可以正常工作：

我想它工作的原因是，因为

id

属性在组件创建时就存在，任何试图访问它的代码都可以立即访问它

但是，此图表反过来嵌入到引导4卡布局中，如下所示：

<div class="row">
    <div class="col-6">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-5">
                        <my-chart id="gaugeChart0"></my-chart>
                    </div>
                    <div class="col-7">
                        ... Some other widgets ...
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-5">
                        <my-chart id="gaugeChart1"></my-chart>
                    </div>
                    <div class="col-7">
                        ... Some other widgets ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但这不起作用，因为angular向

id

属性添加了前缀，这会导致类似

ng reflect id

的结果

我还尝试使用

[attr.id]

设置属性，如下所述：

... 其他一些小部件。。。

这导致MyChartComponent具有一个直接的

id

属性，但它似乎只在组件生命周期的后期添加

我还尝试仅在

ngOnInit

和

ngAfterContentInit

中初始化MyChart组件中的图表，但这也不起作用

---

欢迎提出任何建议或想法

所以我找到了解决这个问题的方法。问题有两方面：

第一个问题与要求具有真正的

id

属性有关，而不是使用angular将属性名称前缀为

ng reflect-

我不知道的是，从Angular 4开始，这个前缀被添加到任何在开发模式下声明为组件的

@Input

变量的属性中（有关详细说明，请参阅）

这个问题的解决方案是编写

[attr.id]=chartId

，而不是

[id]=chartId

。原因是，在本例中，我需要设置一个HTML属性，但是使用方括号表示法创建了一个属性绑定。为了通过属性绑定语法动态设置HTML属性，必须在属性名称中添加前缀

attr.

有关所有有效绑定语法的详细概述，请参阅。 具体查看如何进行属性绑定，请参见

第二个问题是，我试图在尚未创建组件时访问组件的

id

属性。这个问题与Angular的生命周期挂钩有关，它有不同的阶段。有关Angular的生命周期挂钩的详细概述，请参阅

因为我自己并不知道它的细节，我将在这里详细阐述

Angular附带了一组固定的生命周期挂钩，这些挂钩在每次设置组件时都会被调用，并且也会按照预定义的顺序调用。挂钩的定义如下：

建造师

恩贡切斯

恩戈尼特

恩多切克

ngAfterContentInit

检查后的内容

ngAfterViewInit

检查后重新检查

恩戈德斯特罗

_

需要注意的是，在一个步骤中创建或准备的元素只能在随后的任何步骤中访问。在我的例子中，我将图表初始化的所有代码放入

ngAfterContentInit

钩子中，但是只有在调用

ngAfterViewInit

时，组件才会完全加载

最后，解决方案是将预初始化代码放入构造函数中，并将图表初始化代码放入

ngAfterViewInit

方法中。在此阶段，

id

属性已正确创建，可通过图表访问

---

嗨，你是说写

而不是

？我以前已经尝试过这个方法，在本例中，

id

属性名称的前缀是

ng reflect-

字符串，这导致

ng reflect id

属性无法识别为HTML id属性。不过我想我已经弄明白了，我会在稍后发布答案。谢谢你，这非常有帮助！我在构造函数中设置id，在ngOnInit中执行getElementById。显然，组件没有完全初始化！太好了，很高兴它帮助了你！

<div class="row">
    <div class="col-6">
        <widget-container chartId="gaugeChart0"></widget-container>
    </div>
    <div class="col-6">
        <widget-container chartId="gaugeChart1"></widget-container>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-5">
                <my-chart [id]="chartId"></my-chart>
            </div>
            <div class="col-7">
                ... Some other widgets ...
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-5">
                <my-chart [attr.id]="chartId"></my-chart>
            </div>
            <div class="col-7">
                ... Some other widgets ...
            </div>
        </div>
    </div>
</div>