为来自其他父组件的div指定动态ID

Question

我有一个图表组件，如下所示：

<div id="chart">
<ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
</ngx-charts-bar-horizontal>
</div>

我在这里通过它的父div操作这个图表的所有样式，它有id="chart"，但我需要在父组件中两次以上相同的组件！所以这就造成了同样的两个id的问题。

因此，我决定将div的id作为@Input()从父组件传递，如下所示：

<div class="container">
<!-- Other tags -->
<child-component [chartId]="users"></child-component>
<!-- Other tags -->
<child-component [chartId]="visuals"></child-component>
<!-- Other tags -->
</div>

编辑子组件：

TS文件：

@Input() chartId: string;

HTML:

<div [id]="chartId">
<ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
</ngx-charts-bar-horizontal>
</div>

我尝试了这些技术：[id]="chartId"，[attr.id]="chartId"，id="｛｛chartId｝｝">

，但以上都无法从Input设置动态id。

Answer 1

HTML:

<div id="chart"> </div>

组件：

@Input() chartId: string;
ngOnChanges(): void {
const parent_div = document.getElementById('chart');
parent_div.setAttribute('id', this.chartId);
}

在您的子组件中，提供一些初始id作为默认值，并使用ngOnChanges更新id。

Answer 2

在父组件中.html：

<div class="container">
<!-- Other tags -->
<child-component chartId="users"></child-component>
<!-- Other tags -->
<child-component chartId="visuals"></child-component>
<!-- Other tags -->
</div>

以及在您的子组件中。ts:

@Input() chartId: string;

以及在您的子component.html文件中：

<div id="{{ chartId }}">
<ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
</ngx-charts-bar-horizontal>
</div>

编辑

如果上面的解决方案对你不起作用，试试这个：

在父组件.ts文件中声明两个变量：

users: string = 'yourID1';
visuals: string = 'yourID2';

和在父组件中.html：

<div class="container">
<!-- Other tags -->
<child-component [chartId]="users"></child-component>
<!-- Other tags -->
<child-component [chartId]="visuals"></child-component>
<!-- Other tags -->
</div>

我希望这将有助于

Answer 3

有时问题出在ViewEncapsulation级别。更重要的是，如果您试图在<ngx-charts-bar-horizontal/>中设置dom元素的样式。

我认为您可以在ChildComponent中使用ViewEncapsulation.None选项。