Дайте динамический c ID для div, который приходит из другого родительского компонента - PullRequest
Новая
       27

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

3 голосов
/ 28 февраля 2020

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

<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 раза в родительский компонент! Это создает проблему с теми же двумя идентификаторами.

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

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

Ответы [ 3 ]

3 голосов
/ 28 февраля 2020

HTML: 

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

компонент: 

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

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

1 голос
/ 28 февраля 2020

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

и в вашем дочернем компоненте. html file: 

<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';

и в родительском компоненте. html: 

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

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

0 голосов
/ 28 февраля 2020

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

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

...