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

【问题标题】：Give dynamic ID to a div which comes from other parent component为来自其他父组件的 div 提供动态 ID
【发布时间】：2020-02-28 08:59:36
【问题描述】：

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

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

【问题讨论】：

嗨@Hope你能告诉我你在<div [id]="chartId">的`chartId`中得到了什么值吗？
@Coderman 未定义
好的，我发布了答案，你可以试试，让我知道它是否适合你。
@Hope 你想动态设置 Id 属性吗？

标签： angular angular8 angular-input

【解决方案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。

【讨论】：

【解决方案2】：

在父组件.html中：

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

在你的子组件中：

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

编辑

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

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

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

在父component.html中：

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

我希望这会有所帮助

【讨论】：

好的没问题。

【解决方案3】：

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

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

【讨论】：

好的，我会尝试的，但你能告诉我哪种方法可以与我尝试过的 ID 方法不同吗？
id="{{chartId}}" .