Дайте динамический идентификатор div, который поступает из другого родительского компонента

У меня есть компонент диаграммы, как показано ниже:

<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 идентификаторами.

Итак, я решил передать идентификатор div из родительского компонента как @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}}"

но ничего из вышеперечисленного не помогло установить динамический идентификатор из ввода.

Источник

3 ответа

Решение

HTML:

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

составная часть:

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

В вашем дочернем компоненте укажите начальный идентификатор в качестве значения по умолчанию и используйте ngOnChanges для обновления идентификатора.

Источник

В родительском component.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>

Я надеюсь, это поможет

Источник

Иногда проблема находится на вашем уровне ViewEncapsulation. Более того, если вы пытаетесь стилизовать элемент dom внутри своего<ngx-charts-bar-horizontal/>.

Я думаю, вы можете использовать опцию ViewEncapsulation.None внутри вашего ChildComponent.

Источник
Другие вопросы по тегам