为来自其他父组件的 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"，但我需要在父级组件中使用上述相同组件 2 次！所以这会产生相同 2 个 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>

I tried these techniques: [id]="chartId", [attr.id]="chartId", id="{{chartId}}"

但上面的 none 可以从输入设置动态 ID。

Answer 1

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

我认为您可以在 ChildComponent.

中使用 ViewEncapsulation.None 选项

Answer 2

在parent component.html:

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

在你的 child component.ts 中：

@Input() chartId: string;

并在您的 child 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>

编辑

如果上述解决方案对您不起作用，请尝试以下方法：

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

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

并在 parent component.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

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。

为来自其他父组件的 div 提供动态 ID

Give dynamic ID to a div which comes from other parent component

angular

angular8

angular-input