3

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

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

但以上都不能从输入中设置动态 id。

4

3 回答 3

4

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。

于 2020-02-28T10:28:28.487 回答
1

在父组件.html 中：

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

在您的子 component.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>

编辑

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

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

我希望这个能帮上忙

于 2020-02-28T09:22:09.843 回答
0

有时问题出在您的 ViewEncapsulation 级别。更重要的是，如果您尝试在<ngx-charts-bar-horizontal/>.

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

于 2020-02-28T09:16:41.883 回答