Загрузка Angular компонентов через JSON - PullRequest
Новая
       41

Загрузка Angular компонентов через JSON

0 голосов
/ 24 апреля 2020

Я пытаюсь создать динамический c angular компонент, который загружает другие компоненты через JSON, но безуспешно, и мне было интересно, есть ли способ динамического внедрения существующих компонентов в другие компоненты, например:

Мой JSON выглядит так в моем файле component.ts: 

const result = {
  formatedScoreAsPercentage: 99
}

const accordionItems = [
    {
        title: 'Similarity',
        description: result.formatedScoreAsPercentage,
        rows: [{ div: `<app-progress-bar [percentage]="${result.similarityAverage}"></app-progress-bar>` }]
    },
    {
        title: 'Metadata'
    },
    {
        title: 'Next Actions'
    }
];

Это мой компонент. html Файл: 

<mat-accordion>
    <mat-expansion-panel *ngFor="let item of accordionItems">
        <mat-expansion-panel-header>
            <mat-panel-title> {{ item.title }}: </mat-panel-title>
            <mat-panel-description *ngIf="item.description">
                {{ item.description }}
            </mat-panel-description>
        </mat-expansion-panel-header>
        <div class="accordion-row" *ngFor="let row of item.rows" [innerHTML]="row.div"></div>
    </mat-expansion-panel>
</mat-accordion>

Я бы хотел чтобы иметь возможность вставлять app-progress-bar из accordionItems.rows.div JSON через внутренний вызов HTML в моем компоненте. html файл.

Есть ли простой способ вызвать мой существующий компонент app-progress-bar вроде так? Я не могу себе представить, что у angular нет простого способа сделать это.

...