如何设置角度组件的动态“id”HTML属性？

【问题标题】：How to set a dynamic "id" HTML attribute of an angular component?如何设置角度组件的动态“id”HTML属性？
【发布时间】：2023-03-26 19:23:01
【问题描述】：

我的问题与将具有不同参数的相同组件放在同一页面上有关。在这种情况下，它是一个包含来自第三方 Javascript 库 (D3JS) 的图表的组件，需要 HTML id 属性来定位和修改组件的 HTML 内容。

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

<my-chart id="gaugeChart0"></my-chart>

我猜是它起作用的原因，因为id 属性在组件创建时就存在，并且任何尝试访问它的代码都可以立即执行此操作。

然而，这个图表又被嵌入到 bootstrap 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>

现在为了使它更方便（并轻松地将点击事件绑定到整个块等），我想以<div class="card"> 开头的整个部分提取到一个新组件中。

假设我称这个新组件为 WidgetContainerComponent，它包含图表以及引导卡布局，包括在那里定义的其他小部件。

使用此包装器组件时生成的代码将是：

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

为了使其工作，WidgetContainerComponent 有一个输入字段

@Input() chartId: string;

可以设置。

然后我要做的就是将MyChartComponent的id属性设置为已经设置为chartId的字符串：

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

但这不起作用，因为 Angular 为 id 属性添加了一个前缀，这会导致类似于 ng-reflect-id 的内容。

我还尝试使用[attr.id] 设置属性，如here 和here 所述：

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

这导致 MyChartComponent 具有直接的id 属性，但它似乎只在组件生命周期的后期添加。

我还尝试仅在ngOnInit 和ngAfterContentInit 中初始化MyChartComponent 中的图表，但这也不起作用。

非常欢迎任何建议或想法！

【问题讨论】：

• 嗨，你的意思是写<my-chart id="{{chartId}}"></my-chart>而不是<my-chart [id]="chartId"></my-chart>？我之前已经尝试过，在这种情况下，id 属性名称也以ng-reflect- 字符串为前缀，这导致ng-reflect-id 属性不被识别为HTML id 属性。不过我想我已经想通了，我稍后会发布答案。